我們可以通過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>