JS示例05-style行間樣式和class屬性樣式
- 2019 年 11 月 7 日
- 筆記
一、知識要點
1、行間樣式優先順序高於class屬性樣式（設置過行間樣式後，再設置屬性樣式則無效） 2、對同一個元素只採用一種屬性控制方式（要不是行間樣式，要不是class樣式），不要混用
二、源碼參考
<!DOCTYPE > <html> <head> <title></title> <meta charset="utf-8"> <style> #div1 { width: 200px; height: 100px; border: 1px solid #999; } .boxgreen { background: green; } </style> <script> window.onload = function() { var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var div1 = document.getElementById('div1'); btn1.onclick = function() { div1.style.background = 'red'; // 行間樣式 } btn2.onclick = function() { div1.className = 'boxgreen'; // class樣式 } } </script> </head> <body> <input type="button" name="btn2" id="btn2" value="變綠" /> <input type="button" name="btn1" id="btn1" value="變紅" /> <div id="div1"> </div> </body> </html>
三、運行效果
QQ20190328-163818.gif
