JS基础学习:Scroll系列/元素计算后的样式属性值

scrollWidth

元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽

scrollHeight

元素中内容的实际的高(没有边框),如果没有内容就是元素的高

    
        
        
        

    
    
        
        
哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊
        
        
    

获取元素计算后的样式属性值

            // 获取任意一个元素的任意一个属性值
            function getStyle(element, attr) {
                // 判断浏览器是否支持
                return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
            }

例：

案例：筋斗云导航栏

    
        
        
        

    
    
        

            
            

                
北京校区
                
上海校区
                
广州校区
                
深圳校区
                
武汉校区
                
关于我们
                
联系我们
                
招贤纳士
            
        
        
        
    

变速动画封装

            function animate(element, target) {
                clearInterval(element.timeId);
                element.timeId = setInterval(function() {
                    // 获取div的当前位置
                    var current = element.offsetLeft; //数字类型 没有px
                    // 每次移动多少像素
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    // 每次移动后的距离
                    current += step;
                    // 判断当前移动后的位置是否到达目标位置
                    if (Math.abs(target - current) > Math.abs(step)) {
                        element.style.left = current + "px";
                    } else {
                        clearInterval(element.timeId);
                        element.style.left = target + "px";
                    }
                    // 测试代码
                    console.log("目标位置：" + target + "，当前位置：" + current + "，每次移动步数：" + step + "")
                }, 10);
            }

例:

变速动画函数封装增加任意多个属性和回调函数及层级还有透明度

// 任意一个元素移动到指定的目标位置
/* element:元素
 attr：属性名
 target：目标距离*/
  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);

例：