首页 > 代码库 > 获取非行间样式的方法
获取非行间样式的方法
了解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="http://www.mamicode.com/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 }
获取非行间样式的方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。