分組歸類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
    }
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。