我们可以通过js

问题描述：

更改属性css的值我们可以通过javascript更改属性CSS 类的值吗？我们可以通过js

我的意思是，我有创造

<li class="Item">first</li>

凡在CSS类我有属性height: 200; width: 200;

，问题是无论如何我可以通过使用类height & & width变化值JavaScript的？

是的，你一定要能够通过只使用Google找到这个“设置香草CSS JavaScript的” – rjustin

可能[在JavaScript中设置DIV宽度和高度]的副本（https://stackoverflow.com/questions/10118172/setting-div-width-and-height-in-javascript）和[在标准模式下设置元素宽度或高度]（ https://stackoverflow.com/questions/4667651/set-element-width-or-height-in-standards-mode） – kyle

你为什么想这样做？这可能会影响您使用的解决方案（设置内联样式，添加不同的类，生成类，将列表大小设置为自身而不是每个元素等）。 – Blue

答

你最好的方法可能是使用jQuery框架并使用它的.css（）方法。

http://api.jquery.com/css/

$('.Item).css('width', '200px')

应该这样做。

如果你想与香草的JavaScript，你可以尝试以下方法去做：

document.getElementsByClassName("Item").style.width = "300px";

我们可以在干净的JavaScript中做到这一点？因为为这件事安装整个jquery库可能是没有意义的 –

你可以使用vanilla javascript的.style（）方法。我还没有尝试过，只是使用类ID，但尽管如此。 – MLK

同样在这里它只改变当前匹配元素的样式，它不会改变css级样式 – kwarunek

答

var els = document.querySelectorAll(className); 
var index = 0, length = els.length; 
for (var i = 0 ; index < length; index++) { 
    els[index].style.width= "500px"; 
    els[index].style.height= "500px"; 
}

的className只是工作像正常的CSS选择器，这样你就可以像“li.Item”为例。

这将影响所有具有“Item”类的元素。

答

使用element.style：

var element = document.getElementsByClassName('Item'); 
element.style.width = "100px";

就像this answer

或者你可以使用jquery：

$(".Item").css("width", "100px");

答

是的，您可以直接访问样式表CSS属性和support for this is improving，实际上是looks pretty good today（向下滚动到浏览器兼容性部分）。

但是，这不会是一个简单的过程，因为在使用大型样式表时，您必须遍历cssRules数组以找到适当的类（最佳方法）或硬编码类的索引你想（可能不这样做。它在这个例子中工作，因为只有一个类）。或者，我认为，作为一种折中方法，您可以创建一个单独的“动态样式”样式表，并且只有几条可能稍后动态更改的规则。

访问文档样式表并修改你想要像这样的类：

setTimeout(function(){ // Timeout used only for before/after comparison 
 
    var stylesheet = document.styleSheets[0]; 
 
    stylesheet.cssRules[0].style.width = '50px'; 
 
    console.log(stylesheet.cssRules[0]); 
 
}, 750);

.item { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: #000; 
 
    margin: 10px; 
 
    display: inline-block; 
 
}

<div class="item"> 
 

 
</div> 
 
<div class="item"> 
 

 
</div> 
 
<div class="item"> 
 

 
</div>

更多信息在W3 - https://www.w3.org/wiki/Dynamic_style_-_manager_cSS_with_JavaScript – kwarunek

我们可以通过js

相关推荐