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中文網其他相關文章!