获取非行间样式的方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取非行间样式的方法相关的知识，希望对你有一定的参考价值。
了解css三种写入样式的方法
1. 内联: 写在style标签内
1 <style> 2 div { 3 width: 300px; 4 height: 300px; 5 border-width: 1px; 6 border-style: solid; 7 border-color: black; 8 background-color: pink; 9 } 10 </style>
2. 外联: 使用link标签导入
1 <link rel="stylesheet" href="../css/1.css" />
3. 内嵌:直接写在标签内(也称为:行间样式)
1 <div style="border-radius:10px;"></div>
非行间样式的获取
错误方法(这个是获取不到的!!!)
1 <style> 2 div { 3 width: 300px; 4 height: 300px; 5 border-width: 1px; 6 border-style: solid; 7 border-color: black; 8 background-color: pink; 9 } 10 </style> 11 </head> 12 13 <body> 14 <div style="border-radius:10px;"></div> 15 16 <script> 17 var box = document.querySelector(‘div‘); 18 console.log(box.style.width); //获取不到 19 </script> 20 </body>
正确方法(兼容IE)
1 function getStyle(dom, attr) { 2 if (window.getComputedStyle) { 3 return window.getComputedStyle(dom)[attr]; 4 } else { 5 return dom.currentStyle[attr]; 6 } 7 }
以上是关于获取非行间样式的方法的主要内容，如果未能解决你的问题，请参考以下文章