国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

常用元素位置與大小總結(jié)

JellyBool / 2066人閱讀

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

偏移量

offsetHeight: 元素在垂直方向占據(jù)的空間大小 => 內(nèi)容高度 + 上下padding + 上下boder

offsetWidth: 元素在水平方向占據(jù)的空間大小 => 內(nèi)容寬度 + 左右padding + 左右boder

offsetTop: 元素外邊框距離offsetParent的上內(nèi)邊框的距離

offsetLeft: 元素外邊框距離offsetParent的左內(nèi)邊框的距離

offsetParent 是一個(gè)只讀屬性,返回一個(gè)指向最近的(closest,指包含層級(jí)上的最近)包含該元素的定位元素。如果沒有定位的元素,則 offsetParent 為最近的 table 元素對象或根元素(標(biāo)準(zhǔn)模式下為 html;怪異模式下為 body)。當(dāng)元素的 style.display 設(shè)置為 none 或定位為fixed時(shí),offsetParent 返回 null

元素大小

clientWidth: 元素內(nèi)容及內(nèi)邊距所占空間寬度, 不包含滾動(dòng)部分

clientHeight: 元素內(nèi)容及內(nèi)邊距所占空間高度, 不包含滾動(dòng)部分

滾動(dòng)大小

scrollLeft: 被隱藏在內(nèi)容區(qū)域左側(cè)的寬度(有橫向滾動(dòng)條時(shí))

scrollTop: 被隱藏在內(nèi)容上邊區(qū)域的高度(有豎向滾動(dòng)條時(shí))

scrollHeight: 在沒有滾動(dòng)條時(shí),元素內(nèi)容的高度

scrollWidth: 在沒有滾動(dòng)條時(shí),元素內(nèi)容的寬度

常用位置和大小計(jì)算(標(biāo)準(zhǔn)模式)

瀏覽器可視區(qū)寬高

// 不包含滾動(dòng)條
// width
document.documentElement.clientWidth
// height
document.documentElement.clientHeight

// 包含滾動(dòng)條(ie9+, 不是css規(guī)范)
// 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表現(xiàn)不一致,  
// 所以需要取得最大值來獲得準(zhǔn)確的值;

// 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)
    };
}

元素滾動(dòng)隱藏區(qū)域?qū)捀?/p>

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

//文檔滾動(dòng)大小
// top
document.body.scrollTop
// left
document.body.scrollLeft

元素距離文檔頂部大小

// 當(dāng)offsetParent為body時(shí)
// top
el.offsetHeight;

// 當(dāng)offsetParent不為body時(shí),需要一層層循環(huán)至offsetParent為null(通用方法)

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

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

// 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;
}

元素距離視口頂部大小

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

元素距離視口左側(cè)大小

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

判斷元素是否在可視區(qū)

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

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

判斷是否滾動(dòng)到底部

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

    return currentTop == totalTop;
}

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/79485.html

相關(guān)文章

  • DIV+CSS學(xué)習(xí)筆記總結(jié)

    摘要:每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格,表示一個(gè)單元格。 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位: web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師 自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望: 未來IT行業(yè)企業(yè)需求...

    iOS122 評(píng)論0 收藏0
  • DIV+CSS學(xué)習(xí)筆記總結(jié)

    摘要:每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格,表示一個(gè)單元格。 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位: web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師 自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望: 未來IT行業(yè)企業(yè)需求...

    HackerShell 評(píng)論0 收藏0
  • 前端頁面總結(jié)

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

    番茄西紅柿 評(píng)論0 收藏0
  • 前端基礎(chǔ)入門二(CSS)

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

    Lorry_Lu 評(píng)論0 收藏0
  • 03.Android之View原理問題

    摘要:這種自定義控件在原生控件提供的方法外,可以自己添加一些方法。從頂層父到子遞歸調(diào)用方法,方法又回調(diào)。 目錄介紹 3.0.0.1 View的繪制需要經(jīng)過哪些過程?有哪些常用回調(diào)方法?View的繪制流程的詳細(xì)流程是怎樣的? 3.0.0.2 View繪制流程,當(dāng)一個(gè)TextView的實(shí)例調(diào)用setText()方法后執(zhí)行了什么?請說一下原理…… 3.0.0.3 requestLayout()、...

    FrozenMap 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<