正文
JS——样式获取的兼容写法
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
样式获取
- 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式，只能获取行内式
window.getComputedStyle(div, null)
- 返回元素的长宽等带有单位px
- 第二个参数是伪类，没有填null
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 400px;
height: 500px;
background-color: black;
margin-left: 500px;
position: relative;
} div:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background-color: pink;
top: 50px;
left: 100px;
}
</style>
</head><body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
console.log(typeof window.getComputedStyle(div, null)); //object
console.log(window.getComputedStyle(div,':after')['width']);//50px
console.log(window.getComputedStyle(div, null).width); //400px
console.log(window.getComputedStyle(div, null)["width"]); //400px
console.log(window.getComputedStyle(div, null)["background-color"]); //rgb(255, 192, 203)
console.log(window.getComputedStyle(div, null).backgroundColor); //rgb(255, 192, 203)
</script>
</body>
</html>
div.currentStyle（IE678）
<script>
var div = document.getElementsByTagName("div")[0];
console.log(div.currentStyle["width"]);
console.log(div.currentStyle.width);
</script>
兼容写法
<script>
var div = document.getElementsByTagName("div")[0];
console.log(getStyle(div, "width"));
console.log(getStyle(div, "backgroundColor")); function getStyle(ele, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
</script>
