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

資訊專欄INFORMATION COLUMN

DOM盒模型

djfml / 1751人閱讀

摘要：中的盒模型傳統(tǒng)盒模型在傳統(tǒng)盒子模型中我們說的寬度和高度是指該塊元素內(nèi)容的寬度和高度。在這個(gè)基礎(chǔ)上我們在修改或者塊元素的寬度講不會發(fā)生變化。

CSS中的盒模型

傳統(tǒng)盒模型
在傳統(tǒng)盒子模型中我們說的寬度和高度是指該塊元素內(nèi)容的寬度和高度。
而一個(gè)塊元素的寬度是

    width === width+padding(left/right)+border(left/right);

相應(yīng)的一個(gè)塊元素的高度是

height === height+padding(top/bottom)+border(top/bottom);

CSS3中的盒模型
在css3中新增加了盒子模型
.box{

   border-sizing: border-box;

}
此時(shí)塊元素的的width和height僅僅是這個(gè)塊元素的寬度和高度。它包含了這個(gè)塊元素的padding和border。在這個(gè)基礎(chǔ)上我們在修改padding或者border塊元素的寬度講不會發(fā)生變化。改變的是內(nèi)容的寬高。

JS中的盒模型

JS中也提供了一些屬性和方法用來描述當(dāng)前元素的樣式,主要有以下幾種：
備注：通過JS盒子模型屬性獲取的結(jié)果是不帶單位的。而且只能是整數(shù)（它會自動四舍五入，進(jìn)行計(jì)算）

clientWidth/clientHeight
clientWidth/clientHeight：當(dāng)前盒子可視區(qū)域的寬度和高度
可視區(qū)域是指：內(nèi)容的寬高+padding

clientWidth = width + padding(left + right);
clientHeight = height + padding(top + bottom);

可視區(qū)域和內(nèi)容是否溢出以及我們是否設(shè)置了overflow：hidden沒有關(guān)系
在我們的項(xiàng)目中，我經(jīng)常這樣使用這兩個(gè)屬性

//獲取當(dāng)前頁面一屏幕的寬度
W = document.documentElement.clientWidth||document.body.clientWidth;
//獲取當(dāng)前頁面一屏幕的高度
H = document.documentElement.clientHeight||document.body.clientHeight;

利用這個(gè)就可以實(shí)現(xiàn)讓一個(gè)盒子水平和垂直居中。
即實(shí)現(xiàn)相對定位，計(jì)算出來left和top就可以實(shí)現(xiàn)

//width和height是盒子的寬高
left = (W-width)/2;
top = (H-height)/2;

clientLeft/clientTop

clientLeft:盒子左邊框的寬度。
clientTop:盒子上邊框的高度。
它倆獲取的結(jié)果其實(shí)就是border-width。
JS中只有clientLeft和clientTop，沒有clientRight和clientBottom這兩個(gè)屬性。

offsetWidth/offsetHeight

offsetWidth/offsetHeight就是在clientWidth和clientHeight的基礎(chǔ)上加上盒子的邊框。
即：

offsetWidth === clientWidth + border(left/right);
offsetHeight === clientHeight + border(top/bottom)

和內(nèi)容是否溢出沒有關(guān)系。
在我們的項(xiàng)目中，如果想獲取一個(gè)盒子的寬度和高度，我們一般用offsetWidth（而不是clientWidth）和offsetHeight，因?yàn)閎order也算是當(dāng)前盒子的一部分。

scrollWwidth/scrollHeight

1) 沒有內(nèi)容溢出情況下：

   獲取的結(jié)果和clientWidth/clientHeight是一樣的

2) 有內(nèi)容溢出的情況下:

 真實(shí)內(nèi)容的寬度和高度（包含溢出的內(nèi)容），在加上左邊的padding 和上邊的padding 值。
 
    //有橫向滾動條時(shí)，獲取當(dāng)前頁面的真實(shí)寬度
    document.documentElement.scrollWidth||document.body.scrollWidth;
    //有縱向滾動條時(shí)，獲取當(dāng)前頁面的真實(shí)高度
    document.documentElement.scrollHeight||document.body.scrollHeight;

window.getComputedStyle/currentStyle

在JS中獲取元素具體的樣式值：例如獲取某個(gè)元素的paddingLeft值。
方法一：
currentElement.style.XXX
例如：

box.style.paddingLeft

注意這個(gè)方法是獲取當(dāng)前元素的行內(nèi)樣式。只能獲取當(dāng)前元素的行內(nèi)樣式，內(nèi)嵌或者外聯(lián)樣式是不能獲取的。

方法二：
通過 window.getComputedStyle/currentStyle可以獲取所有經(jīng)過瀏覽器計(jì)算過的樣式。

或者當(dāng)前元素的paddingLeft值，使用例子：

window.getComputedStyle(box, null).paddingLeft
//或者下面這個(gè)方法，box是當(dāng)前元素，第二個(gè)參數(shù)是當(dāng)前元素的偽類，一般為
window.getComputedStyle(box, null)["paddingLeft"]

window.getComputedStyle在IE6~8中不兼容。不兼容的原因是因?yàn)樵贗E6~8下，window對象沒有g(shù)etComputedStyle屬性發(fā)放導(dǎo)致的。所以在IE6~8中我們使用currentStyle屬性。備注currentStyle只有IE中才有，其他瀏覽器中都沒有這個(gè)屬性。使用方法例子：

box.currentStyle["paddingLeft"];
//或者
box.currentStyle.paddingLeft

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

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

相關(guān)文章

  • 【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

    摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時(shí)...

    binta 評論0 收藏0

  • CSS盒模型的介紹

    摘要：盒模型的概念與分類盒模型就是一個(gè)盒子，封裝周圍的元素，它包括內(nèi)容邊框內(nèi)邊距外邊距。水平方向邊界不會重疊，垂直方向會重疊，垂直方向的實(shí)際邊界是邊界中的最大值。CSS盒模型的概念與分類 ? ? ?CSS盒模型就是一個(gè)盒子，封裝周圍的HTML元素，它包括內(nèi)容content、邊框border、內(nèi)邊距padding、外邊距margin。 ? ?? ?CSS盒模型分為標(biāo)準(zhǔn)模型和IE模型； ? 標(biāo)準(zhǔn)模型和...

    didikee 評論0 收藏0

  • css盒模型

    摘要：一什么是盒模型說到盒模型大家肯定都能想到但是盒模型分為兩種標(biāo)準(zhǔn)盒模型模型，他們最主要的區(qū)別在于寬高的計(jì)算。 一：什么是盒模型 說到盒模型大家肯定都能想到content,padding,border,margin但是盒模型分為兩種：標(biāo)準(zhǔn)盒模型 IE模型，他們最主要的區(qū)別在于寬高的計(jì)算。1.標(biāo)準(zhǔn)盒模型的寬高不包含padding和border2.IE模型的寬高是padding和border的...

    cod7ce 評論0 收藏0

  • CSS 盒模型

    摘要：盒模型盒模型基本概念標(biāo)準(zhǔn)模型模型標(biāo)準(zhǔn)模型和模型的區(qū)別標(biāo)準(zhǔn)模型模型二者區(qū)別，前者的寬度是內(nèi)容寬度，后者的寬度是內(nèi)容內(nèi)邊距如何設(shè)置這兩種模型標(biāo)準(zhǔn)模型模型如何設(shè)置獲取盒模型對應(yīng)的寬和高僅兼容兼容性好用于獲得頁面中某個(gè)元素的左， CSS 盒模型 CSS CSS 盒模型 基本概念：標(biāo)準(zhǔn)模型 + IE模型 標(biāo)準(zhǔn)模型和IE模型的區(qū)別 標(biāo)準(zhǔn)模型 showImg(https://segmentf...

    wizChen 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<