BOM之三大系列(offset-scroll-client)

時間 2019-11-17

標籤 bom 之三系列 offset scroll client 简体版

原文原文鏈接

offset系列

定位父級(偏移父級)

offsetParent(偏移父級):返回與當前元素最近的通過定位(position不等於static)的父級元素,有以下狀況:
- 若當前元素的父級元素沒有進行CSS定位,offsetParent爲body.
- 若當前元素自身有fixed定位,則返回null.(火狐返回body)
- 若是當前元素(自身無fixed定位)的父級元素中有進行CSS定位,offsetParent爲離自身元素最近的有CSS定位的父級元素.
- body元素offsetParent返回null

偏移量

offsetWidth:html
- 獲取元素的可視寬度,無單位.
- 這個寬度包括元素的邊框(border),水平的padding,垂直滾動條寬度,元素自己寬度. (它不包括僞元素的寬度,如::before 或 ::after)
- 若元素被隱藏,則返回0.
offsetHeight:獲取元素的可視高度,無單位;(其他上同)瀏覽器
offsetLeft:獲取元素左外邊框到定位父級的左內邊框的像素距離;bash
offsetTop:獲取元素傷外邊框到定位父級的上內邊框的像素距離;函數
- 沒有脫離文檔流:offsetLeft:父級元素margin+父級元素padding+父級元素border+本身的margin;(offsetTop同理)
- 脫離文檔流:主要是本身的left(相對於父級)和本身的margin;

scroll系列(捲曲---滾出去)

scrollWidth:元素中內容的實際的寬(沒有邊框,包含內邊距),若是沒有內容就是元素的寬
scrollHeight:元素中內容的實際的高(沒有邊框,包含內邊距),若是沒有內容就是元素的高
scrollTop:向上捲曲出去的距離
scrollLeft:向左捲曲出去的距離

封裝getScroll函數

//獲取瀏覽器向上向左捲曲出去距離的值
    function getScroll(){
            return {
                left : window.pageXOffset || document.documentElement.scrollLeft 
                       || document.body.scrollLeft || 0,
                top :  window.pageYOffset || document.documentElement.scrollTop 
                       || document.body.scrollTop || 0
            };
            
        }
    //測試
    window.onscroll = function(){
        console.log(getScroll().top);  
    };
    }
複製代碼

client系列

clientWidth: 可視區域的寬(沒有邊框),邊框內部的寬度
clientHeight: 可視區域的高(沒有邊框),邊框內部的寬度
clientLeft: 左邊邊框的寬度
clientTop: 上邊邊框的寬度
clientX(clientY):到頂部左部的可視距離

pageX(pageY):獲取向上捲曲與可視距離的和(僅火狐和谷歌支持)測試

盒子跟着鼠標飛實例

谷歌火狐支持e對象 IE8支持window.eventui

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    img{
      position: absolute;
    }
    #box{
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    #img{
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid green;
    }
  </style>
</head>
<body>

<div id="box"></div>
<div id="img"></div>
<script src="common.js"></script>
<script>
  //圖片跟着鼠標飛,能夠中任何的瀏覽器中實現
  //clientX 和 clientY 單獨的使用的兼容代碼
  //scrollLeft 和 scroollTop 的兼容代碼
  //pageX, pageY 和 clientX + scrollLeft 和 clientY + scrollTop
  
  //把代碼封裝在對象中
  
  var evt = {
      //window.event 和 事件參數對象e的兼容
      getEvent:function(evt){
          return window.event || e;
      },
      //可視區域的橫座標的兼容代碼
      getClientX:function(evt){
          return this.getEvent(evt).clientX;
      },
      //可視區域的縱座標的兼容代碼
      getClientY:function(evt){
          return this.getEvent(evt).clientY;
      },
      //頁面向左捲曲出去的橫座標
      getScrollLeft:function(){
          return window.pageXOffset || document.body.scrollLeft 
          || document.documentElement.scrollLeft || 0;
      },
      //頁面向上捲曲出去的縱座標
      getScrollTop:function(){
          return window.pageYOffset || document.body.scrollTop 
          || document.documentElement.scrollTop || 0;
      },
      //相對於頁面的橫座標(pageX 或者 clientX+scrollLeft)
      getPageX:function(evt){
          return this.getEvent(evt).pageX ? this.getEvent(evt).pageX : this.getClientX(evt) + this.getScrollLeft();
      },
      //相對於頁面的縱座標(pageX 或者 clientY + scrollTop)
      getPageY:function(evt){
          return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop();
      }
  }
  document.onmousemove=function (e) {
    my$("box").style.left=evt.getPageX(e)+"px";
    my$("box").style.top=evt.getPageY(e)+"px";
  };

</body>
</html>
    
複製代碼

------------------------------------------------------記錄於 2019.4.16 JavaScript之BOMthis

相關標籤/搜索

每日一句

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