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>
1 function getStyle(dom, attr) { 2 if (window.getComputedStyle) { 3 return window.getComputedStyle(dom)[attr]; 4 } else { 5 return dom.currentStyle[attr]; 6 } 7 }
原文：http://www.cnblogs.com/maopulas/p/7215342.html