脚本化CSS(三):
查询样式(IE独有的)
ele.currentStyle
计算样式只读
返回的计算样式的值不是经过转换的绝对值
IE独有的属性
练习43:封装兼容性方法getStyle(ele,prop)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<style>
div{
width: 200px;
}
</style>
<body>
<div style="height:100px;background-color:red;float:left;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
function getStyle(elem,prop) {
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
</script>
</body>
</html>
一种新的编程思想:不改变伪元素,直接改变类名
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>abraham</title> <style> div{ width: 100px; } .demo::after{ content: ""; width: 50px; height: 50px; background-color: green; display: inline-block; } .yellow::after{ content: ""; width: 50px; height: 50px; background-color: yellow; display: inline-block; } </style> </head> <body> <div class="demo" style="height:100px;background-color:red;"></div> <script type="text/javascript"> var div = document.getElementsByTagName("div")[0]; div.onclick = function(){ div.className = "yellow"; } </script> </body> </html>