JS——位置属性

你是否为style.top  style.left  style.width  style.height  ; offsetWidth   offsetHeight   offsetTop   offsetLeft   scrollTop  scrollLeft 烦恼过，是不是傻傻的分不清楚，如果是的话，请不要担心，因为你现在已经会了

获取一个div的宽高，

  <style>
      div {
          width: 100px;
          height: 100px;
      }
  </style>
      
</head>
<body>
    <div id="d1" ></div>
    <script>
        var t = document.getElementById("d1");
        alert(t.offsetWidth);
        alert(t.offsetHeight);
        alert(t.style.width);
        alert(t.style.height);
    </script>

此时，用offset的可以获取到，而用style的返回的都是空，如果用的是行内样式的话，上面2中方法都能获取的到，所以呢，大部分情况下，如果想要获得一个元素的宽和高的话，我们一般都是使用offset，对于一个没有样式的div的话哈，它的offsetWidth就是当前浏览器窗口的宽度（最大化和最小化的时候值不一样），而offsetHeight是0.

 

offsetTop和offsetLeft这2个属性是指当前元素到其父级元素的顶部和左侧的距离，一定是其父级元素的距离，有时候呢，我们可能会要求得到某一元素到浏览器的顶部和左侧距离，但是该元素和浏览器顶部左侧之间不知道有多少个父级，这时候我们就需要自定一个通用的方法来达到我们的目的

  function T(obj) {
            var lo = 0;
            while (true)
            {
                if (obj.nodeName == "HTML")
                {
                    break;
                }
                lo += obj.offsetTop;
                obj = obj.parentNode;
                alert(lo);
            }
            return lo;
        }

 

scrollTop竖直滚动条滚动了多少 

scrollLeft水平滚动条滚动了多少

posted on 2017-03-19 22:43  奔游浪子  阅读(102)  评论(0)    收藏  举报

导航