JS-获取元素的尺寸_js获取元素的长度-CSDN博客

获取浏览器的尺寸

window.innerWidth [ inner (ɪnə) 内部的]

window.innerHeight

clientWidth 获取自身宽度与左右padding之和
clientHeight 获取自身高度与上下padding之和
clientLeft 左边框的宽度 (边框的宽度)
clientTop 上边框的宽度(边框的宽度)
offsetWidth 获取自身宽度与左右padding与左右border宽度之和
offsetHeight 获取自身高度与上下padding与上下border宽度之和
offsetLeft 距离带有定位的父元素左侧距离; (父元素没有定位以body为准)
offsetTop 距离带有定位的父元素上侧距离;(父元素没有定位以body为准)
scrollTop 页面上方的滚动条高度; (被卷上去的距离)

div {
    width: 100px;
    height: 50px ;
    padding: 20px;
    border: 20px solid red;
}

-------------------------------------------------
var div = document.getElementById("div");

console.log(div.clientWidth); // 输出 140px 

console.log(div.clientHeight); // 输出 90px 

console.log(div.offsetWidth); // 输出 180px 内容宽 100 + padding 40 + border 40

console.log(div.clientWidth); // 输出 130px 内容高 50 + padding 40 + border 40

offset 偏移量

element. offsetTop; 获取相对与带有定位的父元素上方的距离;
element. offsetLeft; 获取相对于带有定位的父元素左方的距离;
父元素没有定位,或没有父元素,以body为准;

offsetWidth 元素自身宽度+左右padding+左右border;

offsetHeight 元素自身高度+上下padding+上下border;

offsetParent 获取该元素带有定位的父元素, 如果没有返回body; 返回的是标签哦;

client 客户端

clienTop 元素上边框的宽度
clientLeft 元素左边框的宽度
clientWith 元素自身宽度+左右padding值
clientHeight 元素自身高度+上下padding值

scroll 滚动

scroll事件: 拖动滚条触发的事件;

 <script>
      var div = document.querySelector("div");
      div.addEventListener("scroll", function () {
        //拖动滚动条触发的事件,绑定的事件的元素一定要有滚动条才能触发
        console.log(div.scrollTop);
      });
    </script>