JavaScript DOM style operations

JavaScript DOM style operations

JavaScript style operations comprising: a control element by inline style style attribute acquired by the style element getComputedStyle method into effect, change the style of pseudo-element by changing the class name to the element realized by a timer animation style

style properties

1. DOM CSS file can not be directly manipulated by operating elements of the style attribute indirect operating style

   var oDiv = document.getElementsByTagName('div')[0];
   oDiv.style.width = '100px';
   oDiv.style.backgroundColor = 'red';
   // style 属性即内联样式，不能得出 CSS 文件定义的内容
   // 如果没有对应内联样式，则返回空字符串
   

2. note

   • Properties Use small hump wording
   • String assignment
   • Composite value is preferably disassembled, beneficial to the properties, such as border
   • style.float instead of using style.cssFloat, do not conflict with reserved words

getComputedStyle way

1. getComputedStyle under the window, return to the style attribute of the element into force

   window.getComputedStyle(elem, null);
   var width = window.getComputedStyle(div, null)['width']; // 返回字符串
   window.getComputedStyle(elem, 'after'); // 返回 after 伪元素的样式属性
   

2. getComputedStyle returned data is converted into specific units, such as converted to em px, converted to a hexadecimal color rgb / rgba etc.

3. IE8 and below do not support getComputedStyle, can be used instead of elem.currentStyle

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

offsetWidth property

1. Physical size offsetWidth, offsetHeight elements can be obtained

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

2. offsetWidth, offsetHeight including padding, a number of development scenarios for the inconvenience, the best method to use getComputedStyle

Pseudo-element style

1. :: berfore, :: after pseudo-element of style can not be changed directly by means of

2. ClssName typically modified to change the style of the associated element of the pseudo-element

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

   var oDiv = document.getElementsByClassName('box1')[0];
   oDiv.className = 'box2';
   // after 伪元素的样式也随之改变
   

Animation style

1. Elements of movement

   By changing the properties of the style element to display content is changed, the following drop-down menu, the drawer sides, like pop-up message box

   We often use CSS3 or some packaged framework to achieve animation, animation effects can lead to better interactive experience to page

2. JS achieve native-style animation

   • Gets the element node to be moved
   • To change explicit style property
   • To determine the animation time, animation and animation speed termination conditions
   • Clear Timer created under the timer termination condition

3. Examples of the drop-down menu

   html

   <div class="dropdown">
       <a href="javascript:;" class="main">下拉菜单</a>
       <ul class="list">
           <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>