在前端開發中，有時候需要動態修改的網頁元素的樣式，這裡將使用JS動態修改元素樣式的方法做個小結： 網頁結構： 按鈕： 標簽：input 類型：button id：btn value：點我 div: 標簽：div id：box 使用JS修改網頁元素樣式有兩種方式： 1.使用ClassName 2.使用 ...
在前端開發中，有時候需要動態修改的網頁元素的樣式，這裡將使用JS動態修改元素樣式的方法做個小結：
網頁結構：
按鈕：
標簽：input 類型：button id：btn value：點我
div:
標簽：div id：box
使用JS修改網頁元素樣式有兩種方式：
1.使用ClassName
2.使用Style對象
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>DOM操作元素的樣式</title> 6 <style type="text/css"> 7 .box{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" id="btn" value="點 我" /> 16 <div id="box"></div> 17 18 <!-- 添加JS代碼 --> 19 <script type="text/javascript"> 20 //定義函數my$-根據元素id獲得頁面元素,目的是為了提高效率 21 function my$(id){ 22 return document.getElementById(id); 23 } 24 25 // 方法1.根據ClassName修改元素的樣式 26 // var btn=my$('btn'); 27 // btn.onclick=function(){ 28 // my$('box').className='box'; 29 // } 30 31 //方法2.根據Style對象修改元素的樣式 32 var btn=my$('btn'); 33 btn.onclick=function(){ 34 var box=my$('box'); 35 box.style.width="100px"; 36 box.style.height="100px"; 37 box.style.backgroundColor="red"; 38 } 39 </script> 40 </body> 41 </html>
註意：
1.操作樣式的時候，使用例樣式ClassName還是使用Style對象？？
當設置多個樣式屬性的時候使用類樣式方便
當設置樣式屬性比較少的時候，使用Style對象比較方便
2.在使用Style對象的時候，遇見寬、高屬性，必須加px單位
3.Style對象屬性樣式的值是字元串
結果圖如圖：
