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 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>