12. 脚本化 CSS

一、脚本化行间样式

二、查询计算样式

三、举例

脚本化CSS，通俗点说，就是使用javascript来操作CSS。

一、脚本化行间样式

读写CSS行间样式：dom.style.prop

• 如果读取没有设置过的行间样式将返回空字符串

• 如果设置的行间样式不符合预定格式，并不会报错，而是静默失败

• 复合属性必须拆解，组合单词变成小驼峰式写法 ：background-color --> backgroundColor

• float 是不能转换的CSS属性，要想访问，应该使用 cssFloat

• 注意：IE8 及以下浏览器不支持 cssFloat，但 IE 浏览器支持 styleFloat

• 写入值必须是字符串格式

// <div id="test" style="float:left"></div>

//IE8-浏览器返回undefined，其他浏览器返回'left'
console.log(test.style.cssFloat);//'left'

//IE浏览器返回'left'，其他浏览器返回undefined
console.log(test.style.styleFloat);

其实，如果操作行间样式，可以使用元素节点的特性操作方法hasAttribute()、getAttribute()、setAttribute()、removeAttribute()等，来操作style属性：

// <div id="test" style="height: 40px;width: 40px;"></div>

console.log(test.hasAttribute('style'));//true
console.log(test.getAttribute('style'));//'height: 40px;width: 40px;'

test.setAttribute('style','height:10px;');
console.log(test.getAttribute('style'));//'height:10px;'

test.removeAttribute('style');
console.log(test.hasAttribute('style'));//false
console.log(test.getAttribute('style'));//null

二、查询计算样式

获取当前元素一切css展示的显示值：window.getComputedStyle(ele,null)

• 计算样式只读

• getComputedStyle()第二个参数通常情况下为null，但是也可以放上伪元素，来获取它的伪元素的尺寸

• 返回的计算样式的值都是绝对值，没有相对单位。（style="width:20% --> 304px）

• IE8 及以下不支持

// <div id="test" style="width: 100px;"></div>

console.log(window.getComputedStyle(test).width);   // '100px'

<style>
#test:before{
    content:'';
    width:20px;
    display:inline-block;
}
</style>
<div id="test" style="width: 100px;"></div>
<script>
//IE8-浏览器报错，其他浏览器返回'20px'
console.log(getComputedStyle(test,':before').width);
</script>

IE 浏览器独有：ele.currentStyle

• 计算样式只读

• 返回的计算样式的值不会进行相应转换，而是原样输出。

// <div id="test" style="font-size:20px;color:red;width:20%;"></div>

//IE8-浏览器返回undefined，IE9+浏览器返回''
console.log(test.currentStyle.font);
//IE浏览器返回red
console.log(test.currentStyle.color);
//IE浏览器返回20%
console.log(test.currentStyle.width);

封装兼容性方法：

// 解决不兼容问题：
function getStyle(elem, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currentStyle[prop];
    }
}

// <div id="test" style="width:20px;"></div>

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
}    
console.log(getCSS(test,'width'));//20px

一般地，我们通过 getComputedStyle() 方法或 currentStyle 属性获得元素的计算样式，但要获得元素精确的位置和尺寸信息，查询元素的计算样式并不是个好主意，因为类似 padding、width 等单一样式并不直接反映元素的位置和尺寸信息，这些信息是多个样式综合作用的结果。所以，最好使用前面介绍过的关于元素视图的 offset、client、scroll和getBoundingClientRect() 等来获取

三、举例

让小方块运动

<div style = "width:100px; height: 100px;background-color: rgb(90, 80, 80); position:absolute;left: 0;top:0;"></div> 

function getStyle(elem, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(elem,null)[prop];
    }else{
        return elem.currentStyle[prop];
    }
}
var div = document.getElementsByTagName('div')[0];
var speed = 3;//speed的作用就是加个速
var time =  setInterval(function  () {
    speed += speed / 7;
     div.style.left = parseInt(getStyle(div,'left')) + speed + 'px';

     if(parseInt( div.style.left) > 500){
         clearInterval(time);
     }
},100)