<style type="text/css">         #box1 {             width: 200px;             height: 200px;             /* background: pink !important; */             background-color: pink;         }

 

        #div {             width: 500px;             margin: 0 auto;         }     </style>

 

 

 

      <div id="div">         <button id="btn01">點一下我變大</button>         <div id="box1">         </div>         <button id="btn02">點一下我 讀取樣式</button>     </div>   <script type="text/javascript">     window.onload = function () {         // 點選按鈕後修改 box1 大小

 

        // 獲取box1         var box1 = document.getElementById('box1');         // 為按鈕繫結單擊響應函式         var btn01 = document.getElementById('btn01');         var btn02 = document.getElementById('btn02');         btn01.onclick = function () {             //    修改box1 的寬度             //   通過js修改元素樣式             //  語法： 元素.style.樣式名 = 樣式值

 

            // 注意：如果CSS的樣式名 含有 - ，             //      這種名稱在JS是不合法的 如： background-color             //      需要將注意的樣式名修改為駝峰命名法，             //      去掉-，然後將-後面的首字母大寫

 

            // 我們通過style屬性設定的樣式都是內聯樣式，             // 而內聯樣式有較高的優先順序，所以通過js修改的樣式往往會立即顯示             box1.style.width = "500px";             // box1.style.height = "500px";             // // box1.style.background = "yellow";             // box1.style.backgroundColor = "yellow";         }

 

        // dom 操作只能增加 修改行內樣式  所以開始行內沒有樣式的時候  無法獲取到具體資料         btn02.onclick = function () {             // 讀取box1的樣式             console.log(box1.style.width);             // alert(box1.style.width)         }     } </script>