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

1、CSS → DOM


网易微专业-DOM编程艺术 04样式操作_第1张图片

网易微专业-DOM编程艺术 04样式操作_第2张图片
网易微专业-DOM编程艺术 04样式操作_第3张图片
网易微专业-DOM编程艺术 04样式操作_第4张图片
内嵌样式表

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、获取样式

网易微专业-DOM编程艺术 04样式操作_第5张图片
只有在内嵌样式才能获取实际样式
网易微专业-DOM编程艺术 04样式操作_第6张图片
window.getComputedStyle() ie9-使用element.currentStyle兼容

4、总结


网易微专业-DOM编程艺术 04样式操作_第7张图片

更新样式

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

Q2:border-radius ??

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

Q4:JS什么意思???




    className - 更新样式
    


    
    
    
    

```

//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);```

你可能感兴趣的:(网易微专业-DOM编程艺术 04样式操作)