js修改css屬性的方法：1、修改style樣式，語法「樣式表的指定內容.style.屬性="值"」；2、修改特定元素節點的style內容，語法「元素物件.style.cssText="樣式值"」；3、使用setAttribute()函數。
本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
#修改style樣式
# 透過document.styleSheets[n] // n表示期望修改的樣式表序號，從0開始計數來取得到期望修改的樣式表，透過cssRules[0]取得到該樣式表的css內容，透過style修改特定樣式。 （此方法比較麻煩，需要清楚指定樣式在樣式表的順序）
#修改特定元素節點的style內容
cssText可以一次修改多個css屬性
style.attrName 修改單一屬性attrName的值
#透過setAttribute 修改style屬性值
<div class="test" style="height: 100px;">TEST</div> <button class="cssText">cssText</button> <button class="setAttribute">setAttribute</button> <button class="stylesheet ">stylesheet </button>
.test {
font-size: 30px;
color: blue;
background-color: blueviolet
} var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式:
stylesheetBtn.addEventListener('click', function(e) {
var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
}, false)【推薦學習：javascript進階教學】
#以上是js怎麼修改css屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
