我们可以通过js

Question

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

我的意思是，我有创造

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

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

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

Answer 1

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

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

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

应该这样做。

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

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

Answer 2

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”类的元素。

Answer 3

使用element.style：

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

就像this answer

或者你可以使用jquery：

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

Answer 4

是的，您可以直接访问样式表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>