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

作者: Merbng | 来源:发表于2019-04-12 22:51 被阅读0次

scrollWidth

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

scrollHeight

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }

            div {
                width: 300px;
                height: 200px;
                border: 1px solid red;
                overflow: auto;
            }

            input {
                top: 120px;
                left: 330px;
                position: absolute;
            }
        </style>

    </head>
    <body>
        <input type="button" name="" id="btn" value="显示效果" />
        <div id="dv">哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊哇啊</div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            // scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
            //scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高

            my$('btn').onclick = function() {
                console.log("offsetWidth:" + my$('dv').offsetWidth); //302  元素的宽, 有边框
                console.log("offsetHeight:" + my$('dv').offsetHeight); //201  元素的高, 有边框

                console.log("scrollWidth:" + my$('dv').scrollWidth); //300 元素中内容的实际的宽
                console.log("scrollHeight:" + my$('dv').scrollHeight); //432 元素中内容的实际的高

                console.log("scrollTop:" + my$('dv').scrollTop); //0 向上卷出去的距离
                console.log("scrollLeft:" + my$('dv').scrollLeft); //0 向左卷出去的距离

            
            };
                //实时的获取向上滚动的距离
            my$('dv').onscroll=function(){
                console.log("实时获取向上滚动的距离:"+my$('dv').scrollTop);
            };
        </script>
    </body>
</html>

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

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

例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" id="btn" value="获取" />
        <div id="dv"></div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            // 获取任意一个元素的任意一个属性值
            function getStyle(element, attr) {
                // 判断浏览器是否支持
                return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
            }
            my$('btn').onclick = function() {
                console.log(getStyle(my$('dv'), 'left')); //100px
            };
        </script>
    </body>
</html>

案例：筋斗云导航栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0
            }

            ul {
                list-style: none
            }

            body {
                background-color: #333;
            }

            .nav {
                width: 800px;
                height: 42px;
                margin: 100px auto;
                background: url(images/rss.png) right center no-repeat;
                background-color: #fff;
                border-radius: 10px;
                position: relative;
            }

            .nav li {
                width: 83px;
                height: 42px;
                text-align: center;
                line-height: 42px;
                float: left;
                cursor: pointer;
            }

            .nav span {
                position: absolute;
                top: 0;
                left: 0;
                width: 83px;
                height: 42px;
                background: url(images/cloud.gif) no-repeat;
            }

            ul {
                position: relative;
            }
        </style>

    </head>
    <body>
        <div class="nav">
            <span id="cloud"></span>
            <ul id="navBar">
                <li>北京校区</li>
                <li>上海校区</li>
                <li>广州校区</li>
                <li>深圳校区</li>
                <li>武汉校区</li>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>招贤纳士</li>
            </ul>
        </div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            var cloud = my$('cloud');
            var list = my$('navBar').children;
            for (i = 0; i < list.length; i++) {
                list[i].onclick = clickHandle;
                list[i].onmouseover = mouseOverHandle;
                list[i].onmouseout = mouseOutHandle;
            }
            var lastPos = 0;

            function clickHandle() {
                lastPos = this.offsetLeft
            };

            function mouseOverHandle() {
                animate(cloud, this.offsetLeft);
            };

            function mouseOutHandle() {
                animate(cloud, lastPos);
            };
        </script>
    </body>
</html>

变速动画封装

            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);
            }

例:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }

            div {
                margin-left: 20px;
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" id="btn1" value="移动400" />
        <input type="button" name="" id="btn2" value="移动800" />
        <div id="dv"></div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            my$('btn1').onclick = function() {
                animate(my$('dv'), 400);
            }
            my$('btn2').onclick = function() {
                animate(my$('dv'), 800);

            }

            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);
            }
        </script>
    </body>
</html>

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

// 任意一个元素移动到指定的目标位置
/* 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);

例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {

      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }

    input {
      z-index: 10;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
  //点击按钮,改变宽度到达一个目标值,高度到达一个目标值

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }


  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);
  }


  //zIndex:1000
  //透明度: 数字类型----小数---放大100倍
  my$("btn1").onclick = function () {

    var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
    animate(my$("dv"), json1, function () {
      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
    });
  };

</script>
</body>
</html>

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

scrollWidth

scrollHeight

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

H5^Study