脚本化css

秒速五厘米 2023-03-13 03:30 24阅读 0赞

## ##

### **1、dom.style ** ###

**css样式声明** \- 它是一个类数组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

**dom.style** 即可赋值 又可以取值

***tips:***

***1、赋值时，后边必须为字符串。且 带px。***

***2、组合单词必须为小驼峰式写法***

***3、取值时，dom.style 取的是行间样式，在style标签中声明的 css样式 ，使用dom.style 取值不起作用。***

<div style="border: 1px solid #000; height: 200px; width: 200px;">
    </div>
    
    <script>
        let div = document.getElementsByTagName('div')[0]
        div.style.width = '100px'
        div.style.height = '100px'
        div.style.backgroundColor = 'red'
        console.log(div.style.width)
    </script>

## ##

### **2、**window.getComputedStyle(dom,  null) \[prop\]  ###

### 获取元素的计算样式 ###

获取到一个元素的所有样式属性，如果没有设置，获取到的是默认属性，之所以叫做计算样式，如：**width: 100em;** 最后

**window.getComputedStyle(ele,  null) .width** 获取到的是经过计算的 **160px** 。

下边只是截了一小部分：

![20200510174830116.png][]

***tips:***

***（1）计算样式是只读的，不可以赋值。***

***（2）IE8及 以下不兼容***

***（3）获取的值 带px，且为字符串形式（可用 parseInt( '10px') => 10 把它转化为数字 ）***

***（4）参数二：可以把该元素的伪元素的样式选中***

### ![20200510190150992.png][] ###

### window.currentStyle(dom) \[prop\]  ###

与上边方法一样，获取元素样式，只不过不是计算出来的样式，只读。

***IE独有的方法 ***

**封装函数：获取一个元素样式**

function getStyle(ele, prop) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[prop]
        } else {
            return ele.currentStyle[prop]
        }
    }

## ##

### 小方块移动 ###

<div style="border: 1px solid #000; background: red; height: 50px; width: 50px; position: absolute; left: 10px;">
    </div>
    <script>
    function getStyle(ele, prop) {
        if(window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[prop]
        }else {
            return ele.currentStyle()[prop]
        }
    }
    let div = document.getElementsByTagName('div')[0]
    div.onclick = function () {
        setInterval(() => { // 获取的值是带px的所以需要parseInt
            this.style.left = parseInt(getStyle(this, 'left')) + 10 + 'px'
        }, 100)
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20230312/a0493fe58723419c87701c3d366421cb.png
[20200510174830116.png]: /images/20230312/792109cad7294e8dad9cab3066bcfa10.png
[20200510190150992.png]: /images/20230312/b63c9bfeafbd46ecab9c2fea7ed3c584.png