我们可以通过js改变属性css的值吗

Question

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

我的意思是，我已经创造了

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

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

问题是无论如何我可以通过使用 javascript 更改 height && width 的 class 中的值吗？

Answer 1

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

Answer 2

您最好的方法可能是使用 jQuery 框架并使用它的 .css() 方法。

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

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

应该可以的。

如果你想用原版 javascript 来做，你可以尝试以下方法：

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

Answer 3

使用element.style:

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

就像在this answer中一样

或者你可以使用jquery:

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

Answer 4

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