样式获取
- 普通获取属性方式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>