成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript基礎(chǔ)總結(jié)（三）——盒子模型

RayKr / 492人閱讀

摘要：中的盒子模型通過中提供一系列的方法和屬性獲取頁面中元素的樣式信息值系列內(nèi)容的寬高是給元素定義的這兩個樣式。

1、js中的盒子模型 
通過js中提供一系列的方法和屬性獲取頁面中元素的樣式信息值；
2、client系列 
內(nèi)容的寬高：是給元素定義的width/height這兩個樣式。如果沒有設(shè)置height值，容器的高度會根據(jù)里面內(nèi)容自己適應(yīng)，這樣獲取的值就是真實(shí)的內(nèi)容的高；如果設(shè)置固定的高度，不管內(nèi)容是多少，內(nèi)容的高度指的都是設(shè)定的這個值；


真實(shí)內(nèi)容的寬高：如果設(shè)置的height是200px，如果內(nèi)容有溢出，那么真實(shí)內(nèi)容的高度是把溢出內(nèi)容的高度也要加起來；


clientHeight || clientWidth
//內(nèi)容的寬度/高度+左右/上下填充(padding)

clientLeft || clientTop
//左邊框/上邊框的高度
3、offset系列 

offsetHeight || offsetWidth
//clientHeight/clientWidth + 左右/上下邊框（和內(nèi)容是否溢出沒有關(guān)系）

offsetParent
//當(dāng)前元素的父級參照物

offsetLeft || offsetTop 
//當(dāng)前元素的外邊框距離父級參照物的內(nèi)邊框的偏移量
計(jì)算元素距離body的上部和左部的距離
function offset(el) {
    var oLeft   = el.offsetLeft,
        oTop    = el.offsetTop,
        oParent = el.offsetParent;
    while(oParent) {
        //ie8下不計(jì)算邊框
        if (navigator.userAgent.indexOf("MSIE 8.0") === -1) {
            oLeft += oParent.clientLeft;
            oTop  += oParent.clientTop;
        }
        oLeft += oParent.offsetLeft;
        oTop  += oParent.offsetTop;
        oParent = oParent.offsetParent;
    }
    return {"left": oLeft,"top": oTop} 
}
offset(box2);//{left: 239, top: 218}

注：在標(biāo)準(zhǔn)的IE8瀏覽器中，我們使用offsetLeft/offsetTop其實(shí)是把父級參照物的邊框已經(jīng)算在內(nèi)，在IE8瀏覽器下就不需要多帶帶加邊框了；

4、scroll系列 
scrollHeight || scrollWidth
//真實(shí)內(nèi)容的高度/寬度（包含溢出）+ 左填充/上填充
//注:獲取到的結(jié)果都是約等于的值，因?yàn)橥粋€瀏覽器是否設(shè)置overflow=hidden對于最終的結(jié)果是有影響的；在不同的瀏覽器中我們獲取的結(jié)果也是不同的。

scrollTop || scrollLeft 
//滾動條卷去的高度
5、操作瀏覽器本身盒子模型信息

clientWidth/clientHeight是當(dāng)前瀏覽器可視窗口的寬度和高度

scrollWidth/scrollHeight是當(dāng)前頁面的真實(shí)寬度和高度（所有屏的高度和寬度的和：是一個約等于值）

要兼容瀏覽器獲取瀏覽器盒子模型信息我們需要這樣寫

document.documentElement[attr] || document.body[attr];
//documentElement在前body在后

//獲取
document.documentElement.clientWidth || document.body.clientWidth;
//設(shè)置
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
6、獲取瀏覽器盒子模型信息的兼容方法 
function win(attr,value) {
    //獲取值
    if(typeof value === "undefined") {
        return document.documentElement[attr] || document.body[attr];
    }
    
    document.documentElement[attr] = value;
    document.body[attr] = value;
}

win("clientWidth");

win("scrollTop",0);

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82718.html

相關(guān)文章

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

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

    iOS122 評論0 收藏0

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

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

    HackerShell 評論0 收藏0

  • 盒模型的一些碎碎念

    摘要：盒模型的簡介本文簡單的總結(jié)了一些基本概念，知識點(diǎn)以及細(xì)節(jié)問題作為前端人員，盒模型是最基礎(chǔ)的知識點(diǎn)，在排版與布局時不可避免與盒模型打交道。 1. 盒模型的簡介 本文簡單的總結(jié)了一些基本概念，知識點(diǎn)以及細(xì)節(jié)問題 作為前端人員，盒模型是最基礎(chǔ)的知識點(diǎn)，在排版與布局時不可避免與盒模型打交道。 在我們編寫HTML時，網(wǎng)頁上的內(nèi)容幾乎都是被包在一個個元素（當(dāng)然也可以叫做標(biāo)簽）中的，最常見的有div...

    王偉廷 評論0 收藏0

  • [ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO

    摘要：以下知識點(diǎn)是前輩師兄總結(jié)基礎(chǔ)語義化標(biāo)簽引進(jìn)了一些新的標(biāo)簽，特別注意等，注意的標(biāo)題結(jié)構(gòu)理解瀏覽器解析的過程，理解的樹形結(jié)構(gòu)，及相應(yīng)理解標(biāo)簽在各個瀏覽器上的默認(rèn)樣式代理樣式，理解中的重置樣式表的概念理解等功能性標(biāo)簽理解標(biāo)簽，理解文件提交過程推薦 以下知識點(diǎn)是前輩師兄總結(jié) 1、HTML/HTML5基礎(chǔ)： 1.0、語義化H5標(biāo)簽1.1、H5引進(jìn)了一些新的標(biāo)簽，特別注意article...

    zhaochunqi 評論0 收藏0

  • [ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO

    摘要：以下知識點(diǎn)是前輩師兄總結(jié)基礎(chǔ)語義化標(biāo)簽引進(jìn)了一些新的標(biāo)簽，特別注意等，注意的標(biāo)題結(jié)構(gòu)理解瀏覽器解析的過程，理解的樹形結(jié)構(gòu)，及相應(yīng)理解標(biāo)簽在各個瀏覽器上的默認(rèn)樣式代理樣式，理解中的重置樣式表的概念理解等功能性標(biāo)簽理解標(biāo)簽，理解文件提交過程推薦 以下知識點(diǎn)是前輩師兄總結(jié) 1、HTML/HTML5基礎(chǔ)： 1.0、語義化H5標(biāo)簽1.1、H5引進(jìn)了一些新的標(biāo)簽，特別注意article...

    learn_shifeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<