JavaScript DOM style manipulation

Style property

1. DOM does not manipulate CSS files directly, but indirectly by manipulating the element’s style attribute

   var oDiv = document.getElementsByTagName('div') [0];
   oDiv.style.width = '100px';
   oDiv.style.backgroundColor = 'red';
   // The style attribute is an inline style and does not yield the content defined in the CSS file
   // An empty string is returned if there is no corresponding inline style
   Copy the code

2. Pay attention to

   • Properties are written with a small hump
   • Assignment uses strings
   • Compound values are best disassembled to improve performance, such as border
   • Style.float is replaced with style.cssfloat, which does not conflict with reserved words

GetComputedStyle method

1. GetComputedStyle under window, which returns the style attribute of the element in effect

   window.getComputedStyle(elem, null);
   var width = window.getComputedStyle(div, null) ['width']; // Returns a string
   window.getComputedStyle(elem, 'after'); // Returns the style attribute of the after pseudo-element
   Copy the code

2. The data returned by getComputedStyle is converted to specific units, such as EM to PX, hexadecimal color to RGB/RGBA, and so on

3. Internet Explorer 8 or later does not support getComputedStyle. Instead, use Elem. CurrentStyle

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

OffsetWidth properties

1. OffsetWidth and offsetHeight can get the physical size of the element

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

2. OffsetWidth and offsetHeight include padding, which is inconvenient for some development scenarios. It is better to use getComputedStyle method

Pseudo-element style

1. ::berfore, ::after The styles of pseudo-elements cannot be changed directly by methods

2. Typically, modifying the clssName of the associated element changes the style of the pseudo-element

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

   var oDiv = document.getElementsByClassName('box1') [0];
   oDiv.className = 'box2';
   // The style of the after pseudo-element also changes
   Copy the code

The style of animation

1. Element movement

   Change the display content of an element by changing its style attributes, such as drop-down menus, side drawers, pop-up information boxes, etc

   We often use CSS3 or some packaged framework for animation, animation effects can bring a better interactive experience to the page

2. Native JS implements style animation

   • Gets the element node to move
   • Identify the style properties to change
   • Determine animation time, animation speed and animation termination conditions
   • Create timer, clear timer under termination condition

3. Example drop-down menu

   html

   <div class="dropdown">
       <a href="javascript:;" class="main">The drop-down menu</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>
   Copy the code

   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>
   Copy the code