常用元素位置與大小總結

JellyBool 發布于2019-08-19 18:21 / 2076人閱讀

摘要：偏移量元素在垂直方向占據的空間大小內容高度上下上下元素在水平方向占據的空間大小內容寬度左右左右元素外邊框距離的上內邊框的距離元素外邊框距離的左內邊框的距離是一個只讀屬性，返回一個指向最近的，指包含層級上的最近包含該元素的定位元素。

偏移量

offsetHeight: 元素在垂直方向占據的空間大小 => 內容高度 + 上下padding + 上下boder

offsetWidth: 元素在水平方向占據的空間大小 => 內容寬度 + 左右padding + 左右boder

offsetTop: 元素外邊框距離offsetParent的上內邊框的距離

offsetLeft: 元素外邊框距離offsetParent的左內邊框的距離

offsetParent 是一個只讀屬性，返回一個指向最近的（closest，指包含層級上的最近）包含該元素的定位元素。如果沒有定位的元素，則 offsetParent 為最近的 table 元素對象或根元素（標準模式下為 html；怪異模式下為 body）。當元素的 style.display 設置為 none 或定位為fixed時，offsetParent 返回 null

元素大小

clientWidth: 元素內容及內邊距所占空間寬度, 不包含滾動部分

clientHeight: 元素內容及內邊距所占空間高度, 不包含滾動部分

滾動大小

scrollLeft: 被隱藏在內容區域左側的寬度(有橫向滾動條時)

scrollTop: 被隱藏在內容上邊區域的高度(有豎向滾動條時)

scrollHeight: 在沒有滾動條時，元素內容的高度

scrollWidth: 在沒有滾動條時，元素內容的寬度

常用位置和大小計算（標準模式）

瀏覽器可視區寬高

// 不包含滾動條
// width
document.documentElement.clientWidth
// height
document.documentElement.clientHeight

// 包含滾動條(ie9+, 不是css規范)
// width
window.innerWidth
// height
window.innerHeight

文檔正文總寬高

// width
 Math.max(document.documentElement.scrollWidth, 
    document.documentElement.clientWidth);
// height 
Math.max(document.documentElement.scrollHeight, 
    document.documentElement.clientHeight);

// 注：由于各瀏覽器在scrollWidth和clientWidth表現不一致，  
// 所以需要取得最大值來獲得準確的值；

// all
function getPageWH(){
    var d = document.documentElement;
    var sw = d.scrollWidth,
        sh = d.scrollHeight,
        cw = d.clientWidth,
        ch = d.clientHeight;
    return {
        width: Math.max(sw, cw),
        height: Math.max(sh, ch)
    };
}

元素滾動隱藏區域寬高

// top
el.scrollTop;
// left
el.scrollLeft;

//文檔滾動大小
// top
document.body.scrollTop
// left
document.body.scrollLeft

元素距離文檔頂部大小

// 當offsetParent為body時
// top
el.offsetHeight;

// 當offsetParent不為body時，需要一層層循環至offsetParent為null(通用方法)

// top
function getTop(el){
    var top = el.offsetTop,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetTop;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

元素距離文檔左側大小(與上面類似)

// left
el.offsetLeft;

// left 
function getLeft(el){
    var top = el.offsetLeft,
        currentParent = el.offsetParent;
    while(currentParent != null){
        top += currentParent.offsetLeft;
        currentParent = currentParent.offsetParent;
    }
    return top;
}

元素距離視口頂部大小

// 元素距離視口頂部大小 = 元素距離文檔頂部大小 - 文檔正文垂直滾動高度；
function topToViewport(el){
    return getTop(el) - document.body.scrollTop;
}

元素距離視口左側大小

// 元素距離視口頂部大小 = 元素距離文檔左側大小 - 文檔正文水平滾動高度；
function leftToViewport(el){
    return getLeft(el) - document.body.scrollLeft;
}

判斷元素是否在可視區

// 文檔正文垂直滾動高度 < 可視區域范圍 < (瀏覽器可視區高度+文檔正文垂直滾動高度)
function isOnViewport(el){
    var offsetTop = getTop(el), // 元素距離頂部高度
        st = document.body.scrollTop, // 文檔正文垂直滾動高度
        vh = document.documentElement.clientHeight;  // 視口高度

    return (offsetTop > st) && (offsetTop < st + vh);
}

判斷是否滾動到底部

function isBottom(){
    var currentTop = document.body.scrollTop + document.documentElement.clientHeight;
    var totalTop = document.documentElement.offsetHeight;

    return currentTop == totalTop;
}

GPU云服務器云服務器 dom元素位置數組元素位置java js獲取元素位置 html 查元素位置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79485.html

DIV+CSS學習筆記總結篇

摘要：每個列表項始于標簽。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。標簽的屬性應當與相關元素的屬性相同。姓名性別姓名性別單元格標簽可以定義表格中的一個單元格，表示一個單元格。第一部分 HTML 第一章職業規劃和前景職業方向規劃定位： web前端開發工程師 web網站架構師自己創業轉崗管理或其他 web前端開發的前景展望：未來IT行業企業需求...

iOS122 2019-08-29 11:13 評論0 收藏0
DIV+CSS學習筆記總結篇

摘要：每個列表項始于標簽。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。標簽的屬性應當與相關元素的屬性相同。姓名性別姓名性別單元格標簽可以定義表格中的一個單元格，表示一個單元格。第一部分 HTML 第一章職業規劃和前景職業方向規劃定位： web前端開發工程師 web網站架構師自己創業轉崗管理或其他 web前端開發的前景展望：未來IT行業企業需求...

HackerShell 2019-08-01 15:41 評論0 收藏0
前端頁面總結

摘要：重疊元素元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素屬性指定了一個元素的堆疊順序哪個元素應該放在前面，或后面一個元素可以有正數或負數的堆疊順序具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。元素的默認值，沒有定位，遵循正常的文檔流對象。靜態定位的元素不會受到 top, bottom, left, right影響。 fixed 定位元素的位置相對于瀏覽器窗口是固定位...

番茄西紅柿 2019-04-22 16:12 評論0 收藏0
前端基礎入門二（CSS）

摘要：輸入的時候少按一個鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區分變量命名變量命名是用不要純數字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數上。當需要設置英文字體時，英文字體名必須位于中文字體名之前。回顧上一節HTML 思維導圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 評論0 收藏0
03.Android之View原理問題

摘要：這種自定義控件在原生控件提供的方法外，可以自己添加一些方法。從頂層父到子遞歸調用方法，方法又回調。目錄介紹 3.0.0.1 View的繪制需要經過哪些過程？有哪些常用回調方法？View的繪制流程的詳細流程是怎樣的？ 3.0.0.2 View繪制流程，當一個TextView的實例調用setText()方法后執行了什么？請說一下原理…… 3.0.0.3 requestLayout()、...

FrozenMap 2019-08-16 14:14 評論0 收藏0