网易微专业-DOM编程艺术 04样式操作

1、CSS → DOM

内嵌样式表

2、样式更新

↓

⑴element.style.borderColor = 'red'; element.style.color = 'red';
问题：①更新一个属性需要一条语句②不是我们熟悉的CSS
⑵style.cssText
element.style.cssText = 'border-color:red;color:red;';
以上两种【样式混在逻辑中】！
⑶更新class 【推荐】

//CSS
.invalid{border-color:red;
             color:red;         
}

element.className += ' invalid';
【问题：】一次更新很多元素的样式 ？？
更换样式表。

3、获取样式

只有在内嵌样式才能获取实际样式

window.getComputedStyle() ie9-使用element.currentStyle兼容

4、总结

更新样式

Q1:addEventListener($('update')...)中addEventListener？？$('update')？？

Q2:border-radius ??

Q3:box-shadow: 2px 2px 3px #ededed inset; ？？inset??

Q4:JS什么意思？？？

    
    


    
    更新样式
    
    

```

//JS
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
var Util = (function(document, util){
util = util || {};
util.addEventListener = function(element, type, listener){
if(element.addEventListener){
element.addEventListener(type,listener,false);
} else {
element.attachEvent('on' + type, listener);
}
}
return util;
})(document,Util);```