脚本化CSS(二):
查询计算样式
window.getComputdStyle(ele,null);
计算样式只读
返回的计算样式的值都是绝对值,没有相对单位
IE8及以下不兼容
<!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];
</script>
</body>
</html>
获取的是当前元素所展示的一切css的显示值,包括默认值。
第二个值为什么是null:null能够解决伪元素的问题,用他就能获取伪元素的样式表!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
<style>
div{
width: 100px;
}
div::after{
content: "";
width: 50px;
height: 50px;
background-color: green;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:100px;background-color:red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
</body>
</html>