Question

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

我的意思是，我创造了

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

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

问题是无论如何我可以改变height＆amp;＆amp;的 class 中的值。 width使用javascript？

Answer 1

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

然而，这不是一个简单的过程，因为使用大样式表，您必须遍历cssRules数组才能找到合适的类（最佳方法）或硬编码你想要的类的索引（可能不要这样做。它在示例中起作用，因为只有一个类）。

或者，我认为，作为一种折衷的方法，您可以创建一个单独的动态风格＆＃39;样式表只有一些规则可能会在以后动态更改。

访问文档样式表并修改所需的类：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

应该这样做。

如果您想使用vanilla javascript，可以尝试以下方法：

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

我们可以用js改变属性css的值

4 个答案: