28、JavaScript学习笔记——脚本化CSS

脚本化CSS

1. 读写元素CSS属性

1.1 dom.style.prop

可读写行间样式，没有兼容性问题。

dom.style返回一个CSSStyleDeclaration类数组对象，其中存放了该元素节点的行间CSS属性，且可读写。

DOM可操作元素的属性，同样可以操作元素的style属性，即可通过改变行间样式表来改变元素样式。写入的值必须是字符串格式。

• 由于这种方式读写的是元素的行间样式，因此元素的内部和外部样式表的样式声明是读不到的；

• 遇到float这种保留字属性，float在其他语言中是浮点数类型的含义，为了符合W3C标准，前面应加css，例如float应写作cssFloat。

• 建议复合属性拆解，例如border属性就是一个复合属性，包含border-left,border-top等，建议分开设置。例如div.style.border="2px solid black";，要分开书写div.style.borderWidth="2px";,div.style.borderStyle="solid;",div.style.borderColor="balck";。

• 组合单词变成小驼峰式写法。例如background-color必须写成backgroundColor。

2. 读CSS计算属性

2.1 window.getComputedStyle(eleDom, 伪元素字符串/null)

返回的也是CSSStyleDeclaration类数组对象，存取的是当前CSS属性的显示值，即最终层叠计算出来的属性值。而且计算样式是只读的，不能修改getComputedStyle()方法返回的对象。

不同于style，getComputedStyle()获取的是经过层叠计算而出的属性值，style获取的只是行间样式表的属性。

getComputedStyle()接收两个参数，要取得计算样式的元素和伪元素字符串（如"after"/“:after”/“::after”）。若不需要查询伪元素，则第二个参数可以传null。

getComputedStyle()返回的是对象，因此可以进一步查询对象中的具体属性，如

<div id="myDiv" style="width:100px; height:100px; background-color:red; color:#fff;"></div>

<script>
    let div = document.getElementById("myDiv");
    let computedStyle = window.getComputedStyle(div, null);
    console.log(computedStyle.width);
    console.log(window.getComputedStyle(div, null).color);
</script>

返回额计算样式都是绝对值，没有相对单位。对于长度，计算样式返回的是转换后以px像素值为单位的值；对于颜色，计算样式返回的是rgb的形式，比如颜色为red，则返回的是"rgb(255,0,0)"。

IE8以及IE8以下不兼容。

2.2 currentStyle

在IE8以及IE8以下的浏览器中，使用ele.currentStyle代替window.getComputedStyle(ele, null)。

计算样式只读。

返回的计算样式值不是经过转换的绝对值。

IE独有的属性。

2.3 封装获取计算属性的函数，解决兼容性问题

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