JavaScript DOM 樣式操作

JavaScript 樣式操作包括：通過 style 屬性控制元素行內樣式，通過 getComputedStyle 方法獲取元素生效的樣式，通過改變元素類名改變偽元素樣式以通過計時器實作樣式影片

style 屬性

1. DOM 不能直接操作 CSS 檔案，通過操作元素的 style 屬性間接操作樣式

   var oDiv = document.getElementsByTagName('div')[0];
   oDiv.style.width = '100px';
   oDiv.style.backgroundColor = 'red';
   // style 屬性即行內樣式，不能得出 CSS 檔案定義的內容
   // 如果沒有對應行內樣式，則回傳空字串
   

2. 注意

   • 屬性使用小駝峰寫法
   • 賦值使用字串
   • 復合值最好拆解，有利于提高性能，如 border
   • style.float 使用 style.cssFloat 代替，不沖突保留字

getComputedStyle 方法

1. window 下的 getComputedStyle，回傳元素生效的樣式屬性

   window.getComputedStyle(elem, null);
   var width = window.getComputedStyle(div, null)['width']; // 回傳字串
   window.getComputedStyle(elem, 'after'); // 回傳 after 偽元素的樣式屬性
   

2. getComputedStyle 回傳的資料會被轉換成特定的單位，如 em 會轉換為 px，十六進制顏色會轉換為 rgb/rgba 等

3. IE8 及以下不支持 getComputedStyle，可以使用 elem.currentStyle 代替

   function getStyles(elem) {
       if (window.getComputedStyle {
           return window.getComputedStyle(elem, null);
       } else return elem.currentStyle;
   }
   

offsetWidth 屬性

1. offsetWidth、offsetHeight 可以獲得元素的物理尺寸

   var oDiv = document.getElementsByTagName('div')[0];
   oDiv.offsetWidth; 
   oDiv.offsetHeight; 
   // offsetWidth = border + padding + width
   

2. offsetWidth、offsetHeight 包括了 padding，對一些開發場景造成不便，最好使用 getComputedStyle 方法

偽元素樣式

1. ::berfore，::after 偽元素的樣式無法通過方法直接改變

2. 通常修改關聯元素的 clssName 改變偽元素的樣式

   .box1::after{
       content: "";
       background-color: red;
   }
   .box2::after{
       content: "";
       background-color: black;
   }
   

   var oDiv = document.getElementsByClassName('box1')[0];
   oDiv.className = 'box2';
   // after 偽元素的樣式也隨之改變
   

樣式影片

1. 元素運動

   通過改變元素的樣式屬性使其顯示內容發生改變，如下拉選單、側邊抽屜、彈出資訊框等

   我們經常使用 CSS3 或者一些封裝好的框架來實作影片，影片效果可以給頁面帶來更好的互動體驗

2. 原生 JS 實作樣式影片

   • 獲取要運動的元素節點
   • 明確要改變的樣式屬性
   • 確定影片時間，影片速度和影片終止條件
   • 創建計時器，終止條件下清除計時器

3. 下拉選單示例

   html

   <div >
       <a href="javascript:;" >下拉選單</a>
       <ul >
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ul>
   </div>
   <script type="text/javascript">
   
       var dropdown = document.getElementsByClassName('dropdown')[0],
           oList = dropdown.getElementsByClassName('list')[0],
           timer = null,
           listHeight = 0,
           speed = 2;
   
       dropdown.onmouseenter = function () {
           clearInterval(timer);
           timer = setInterval(function () {
               if (listHeight >= 200) {
                   clearInterval(timer);
               } else {
                   listHeight = parseInt(getStyles(oList)['height']) + speed;
                   oList.style.height = listHeight + 'px';
               }
           }, 1);
       }
   
       dropdown.onmouseleave = function () {
           clearInterval(timer);
           timer = setInterval(function () {
               if (listHeight <= 0) {
                   clearInterval(timer);
               } else {
                   listHeight = parseInt(getStyles(oList)['height']) - speed;
                   oList.style.height = listHeight + 'px';
               }
           }, 1);
       }
   
       function getStyles(elem) { 
           if (window.getComputedStyle) {
               return window.getComputedStyle(elem, null);
           } else return elem.currentStyle;
       }
   </script>
   

   css

   <style>
           .dropdown {
               width: 100px;
           }
   
           .dropdown .main {
               display: block;
               height: 50px;
               background-color: black;
               color: white;
               text-align: center;
               text-decoration: none;
               line-height: 50px;
           }
   
           .dropdown .list {
               overflow: hidden;
               height: 0;
               margin: 0;
               padding: 0;
               list-style: none;
           }
   
           .list li {
               height: 50px;
               background-color: #999;
               text-align: center;
               line-height: 50px;
           }
   
           .dropdown li:hover {
               background-color: black;
               color: white;
           }
       </style>
   

標籤：JavaScript

上一篇：JavaScript模塊化-CommonJS、AMD、CMD、UMD、ES6

下一篇：關于visocode 自動保存時自動添加分號問題