[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> ~~~