[TOC] ## 1.CSSStyleDeclaration 接口 > 語法：element.style ### 1.1cssText > 語法：element.style.cssText=attr ~~~ <div id="test">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ this.style.cssText="border:1px solid #333;color:red"; } </script> ~~~ ### 1.2length ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ alert(this.style.length) } </script> ~~~ ### 1.3getPropertyValue() ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ alert(this.style.getPropertyValue("color")) console.log(this.style.color) } </script> ~~~ ### 1.4item() > 方法接受一個整數值作為參數，返回該位置的 CSS 屬性名 ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ alert(this.style.item(0)) //color } </script> ~~~ ### 1.5removeProperty() > 接受一個屬性名作為參數，在 CSS 規則里面移除這個屬性 ~~~ <div id="test" style="color:red;font-size: 18px">hello world</div> <script> var test = document.getElementById("test"); test.onclick = function(){ this.style.removeProperty("color") } </script> ~~~ ### 1.6setProperty() > 語法：setProperty(attr,value) ## 2.element節點 ### 2.1className,classList ~~~ lassList對象有下列方法。 add()：增加一個 class。 remove()：移除一個 class。 contains()：檢查當前元素是否包含某個 class。 toggle()：將某個 class 移入或移出當前元素。 item()：返回指定索引位置的 class。 ~~~ ~~~ <div class="test"></div> <script> var lis = document.getElementsByClassName("test")[0]; lis.onclick = function(){ alert(this.classList.contains("test")) } </script> ~~~