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什么意思？？？
<!DOCTYPE html>
<html>
<head>
<title>className - 更新样式</title>
<style>
button{padding: 4px 5px;margin-left: 10px;}
.u-txt{width: 215px;padding: 4px 5px;border: 1px solid #ababab;border-radius: 3px;box-shadow: 2px 2px 3px #ededed inset;font-size: 14px;font-weight: bold;}
.invalid{border-color: red;color: red;}
</style>
</head>
<body>
<input id="mobile" class="u-txt" value="13564782365">
<button id="update">更新样式</button>
<script src="util.js"></script>
<script>
Util.addEventListener($('update'), 'click', updateStyle);
function updateStyle(){
var element = $('mobile');
element.className += ' invalid';
}
</script>
</body>
</html>```
//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);```
网友评论