第四节 style下的属性

cssText  -->批量操作css
length(了解)
getPropertyValue()  获取style属性里面的值
item()  返回对应位置的css属性名
removeProperty()  移除属性
setProperty()     设置属性

1.cssText—批量操作css

语法：
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>

2.length

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

3.getPropertyValue()—获取style属性里面的值

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

4.item()—返回对应位置的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>

5.removeProperty()—移除属性

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

6.setProperty()—设置属性

语法:
setProperty(attr,value)
//this.style.setProperty("background-color","red")

  <p id="test">hello world</p>
    <script>
       var test=document.getElementById("test");
        test.style.cssText="color:red;background-color:#333;font-size:14px"
        console.log(test.style.getPropertyValue("color"))
        console.log(test.style)
        console.log(test.style.item(0))
        test.onclick=function(){
            this.style.removeProperty("color")
            this.style.setProperty("background-color","green")
        }
    </script>