JavaScript如何获取样式（行间）

迈不过友情╰ 2022-06-05 06:08 160阅读 0赞

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

#### 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的方式，主要原因这样可以进来减少浏览器喧嚷的次数，提高网页性能。具体可以看[阮一峰的网页性能管理][Link 1]

#### 2、length ####

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

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

[Link 1]: http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html