分组归类js中的offset,client,scroll,page等大小

时间 2020-02-13

标签分组归类 offset client scroll page 大小栏目 JavaScript 繁體版

原文原文链接

分组归类js中的offset,client,scroll,page等大小

一.offset

offsetTop
offsetLeft
offsetWidth
offsetHeight

1.offsetTop--offsetLeft

说明:javascript

这两个属性是获取元素左上角相对具备定位属性的最近父级元素的顶部,左边的距离
若是该元素的全部父级都没有加定位属性,那么将相对body

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style> body { margin: 0; } #box { position: relative; width: 300px; height: 300px; background-color: red; overflow: hidden; margin: 50px; } #child { width: 100px; height: 100px; background-color: blue; margin: 30px; border: 10px solid yellow; padding: 10px; } </style>
</head>
<body>
  <div id="box">
    <div id="child">
      
    </div>
  </div>
  <script> var box = document.getElementById('box'); console.log(box.offsetTop);//50,父级没有定位,相对body console.log(box.offsetLeft);//50,父级没有定位,相对body var child = document.getElementById('child'); console.log(child.offsetTop);//30,父级有定位,相对box console.log(child.offsetLeft);//30,父级有定位,相对box </script>
</body>
</html>

复制代码

2.offsetWidth--offsetHeight

说明:css

这两个属性是获取元素盒子实际的大小,不包含滚动条
size=content+padding*2+border*2
这两个属性只能取值,不能赋值

<script>
	 var box = document.getElementById('box');
     console.log(box.offsetWidth);//300
     console.log(box.offsetHeight);//300
      
      
     var child = document.getElementById('child');
     console.log(child.offsetTop);//140
     console.log(child.offsetLeft);//140

  </script>
复制代码

注意:html

实际上在没有设置box-sizing:border-box

二.client

clientTop
clientLeft
clientWidth
clientHeight

1.clientTop--clientLeft

说明:java

clientLeft 是border-left 的宽度
clientTop 是border-top 的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; border: 45px solid red; padding: 10px; background-color: green; } </style>
</head>
<body>
    <div id="box">

    </div>
<script> var box = document.getElementById('box'); console.log(box.clientLeft);//45 console.log(box.clientTop);//45 </script>
</body>
</html>
复制代码

2.clientWidth--clientHeight

说明:ui

盒子的大小,不包含border,滚动条
size=content+padding*2

console.log(box.clientWidth);//120
    console.log(box.clientHeight);//120
复制代码

三.scroll

scollTop
scollLeft
scrollWidth
scrollHeight

1.scrollTop--scrollLeft

说明:spa

只有在滚动时才会出现,要配合滚动事件获取大小
分别表示X轴,y 轴滚动的距离
element.onscroll=function(){//滚动事件};

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; border: 30px solid red; padding: 10px; background-color: green; overflow: auto; } </style>
</head>
<body>
  <div id="box">
    小明跟小华到动物园玩，进门时，小明指着小华对看门人说：“看清楚喔！等会儿出来，别说我偷了大家的猴子！” 
  </div>
  <script> var box = document.getElementById('box'); // 当拖动box中的滚动条的时候触发 box.onscroll = function () { console.log(box.scrollLeft); console.log(box.scrollTop); } </script>
</body>
</html>

复制代码

2.scrollWidth--scrollHeight

说明:code

内容的大小，包括padding 和未显示的内容(须要滚动的部分),不包含滚动条
scrollWidth=content+padding*2-17(滚动条宽度)

console.log(box.scrollWidth);//103
   console.log(box.scrollHeight);//269,比较难测
复制代码

四.page

pageX
pageY

1.pageX--pageY

说明:htm

这两个属性是事件对象里面的属性,所以须要经过事件对象来获取
鼠标触发事件的区域是在选中的元素内
可是获取到的值是相对整个页面来讲的

bar.onclick=function(e){//鼠标点击事件,其余事件也能够
    e=e||window.event;
    //获取鼠标
    var x=e.pageX
    var y=e.pageY
    }
复制代码