首頁  >  文章  >  web前端  >  js怎麼修改css屬性

js怎麼修改css屬性

青灯夜游
青灯夜游原創
2021-04-16 17:18:019581瀏覽

js修改css屬性的方法:1、修改style樣式,語法「樣式表的指定內容.style.屬性="值"」;2、修改特定元素節點的style內容,語法「元素物件.style.cssText="樣式值"」;3、使用setAttribute()函數。

js怎麼修改css屬性

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

原生JS修改CSS屬性有以下三種方法

  • #修改style樣式
    # 透過document.styleSheets[n] // n表示期望修改的樣式表序號,從0開始計數來取得到期望修改的樣式表,透過cssRules[0]取得到該樣式表的css內容,透過style修改特定樣式。 (此方法比較麻煩,需要清楚指定樣式在樣式表的順序)

  • #修改特定元素節點的style內容
    cssText可以一次修改多個css屬性
    style.attrName 修改單一屬性attrName的值

  • #透過setAttribute 修改style屬性值


#HTML程式碼
<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
CSS程式碼
.test {
   font-size: 30px;
   color: blue;
   background-color: blueviolet
}
JS程式碼
    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(&#39;click&#39;, function(e) {
        var stylesheet = document.styleSheets[0];
        stylesheet.cssRules[0].style.backgroundColor = "green";
    }, false);
    
    // 2. 修改特定元素节点的style内容
    cssTextBtn.addEventListener(&#39;click&#39;, function(e) {
        testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
        testNode.style.border = "1px solid black"
    }, true);
    
    // 3. 通过setAttribute 修改style属性值
    attributeBtn.addEventListener(&#39;click&#39;, function(e) {
        testNode.setAttribute(&#39;style&#39;, &#39;width: 400px; background-color: yellow; height: 300px;&#39;)
    }, false)

【推薦學習:javascript進階教學

#

以上是js怎麼修改css屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn