JavaScript如何获取样式（行间）

前言：又接触了一些不知道的知识，真开心。下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！

1、cssText

关于这个属性，大家应该都很属性。

<div class="box" style="color: red;font-size: 34px;">
    welcome
</div>
<script>
    window.onload = function() {
        var oBox = document.querySelector(".box");
        var length = oBox.style.length;
        console.log(oBox.style.cssText);
    }
</script>

我们通过JavaScript设置DOM样式的时候最好通过cssText的方式，主要原因这样可以进来减少浏览器喧嚷的次数，提高网页性能。具体可以看阮一峰的网页性能管理

2、length

得到行间样式的长度，比较简单，不多说

<div class="box" style="color: red;font-size: 34px;">
    welcome
</div>
<script>
    window.onload = function() {
        var oBox = document.querySelector(".box");
        var length = oBox.style.length;
        for(var i=0; i<length; i++) {
            console.log(oBox.style[i]);
        }
    }
</script>

3、getPropertyValue

获取行间样式的属性值，需要注意的是这里获取属性的值不能够使用驼峰式

<div class="box" style="color: red;font-size: 34px;">
    welcome
</div>
<script>
    window.onload = function() {
        var oBox = document.querySelector(".box");
        console.log(oBox.style.getPropertyValue("font-size"));//不能够使用fontSize
    }
</script>

4、setProperty

设置行间样式的属性，可以接受三个参数，第一个是属性名称，第二个是属性值，第三个是important，就是是否优先，具体使用看下面的例子

<div class="box" style="color: red;font-size: 34px;">
    welcome
</div>
<script>
    window.onload = function() {
        var oBox = document.querySelector(".box");
        oBox.style.setProperty("color", "blue", "important");
    }
</script>

5、removeProperty

删除行间样式的属性，比较简单

<div class="box" style="color: red;font-size: 34px;">
    welcome
</div>
<script>
    window.onload = function() {
        var oBox = document.querySelector(".box");
        oBox.style.removeProperty("color");
    }
</script>

6、getPropertyPriority

判断行间样式是否设置了important，如果设置了，那么返回important，如果没有设置，那么返回空

<div class="box" style="color: red !important;font-size: 34px;">
    welcome
</div>
<script>
    window.onload = function() {
        var oBox = document.querySelector(".box");
        console.log(oBox.style.getPropertyPriority("color"));
    }
</script>

（完） 2017/11/21 0:40