JS Jquery常用寬高及應用

關於js的寬高，隨便一搜就是一大堆。這個一大堆對我來說可不是什麼好事，看的頭都大了。所以今天就總結了一些比較會常用的，並說明一下應用場景。

先來扯一下documentelement和body的微妙關係：

documentelement===html  ----->>    documentelement.childnode[2]===body  【很明顯，父子關係】

如果中沒宣告html，則拿不到documentelement這個值，但此時body==documentelement，這才有了下面的相容寫法.

js的寬高及應用：

可視區尺寸（.clientheight）：

對document：可視區height = 整個瀏覽器的高 - 工具欄部分height.

相容寫法：document.documentelement.clientheight||document.documentelement.clientheight.

對div：可視區height = height + padding.

寫法：divobj.clientheight.

.offsetheight：

對document：

ie、opera 認為 offsetheight = clientheight + 滾動條 + 邊框。 ns、ff 認為 offsetheight 是網頁內容實際高度，可以小於 clientheight。 

對div：

divobj.offsetheight=height+padding+border.

滾動距離（.scrolltop）：

對document：可視區頂部到網頁頂部，即網頁被卷上去的部分.

獲取相容寫法：document.body.scrolltop || document.documentelement.scrolltop.

設定相容寫法：document.body.scrolltop = document.documentelement.scrolltop=...

對div：div被卷上去的部分.

獲取寫法：divobj.scrolltop.

設定寫法：divobj.scrolltop=...

.scrollheight：

對document： document.body.scrollheight被視為整個網頁的高。【網頁內容大於clientheight時】

獲取寫法：document.body.scrollheight.

對div：沒有滾動條時，scrollheight與clientheight屬性結果相等，scrollwidth與clientwidth屬性結果相等；

存在滾動條，即存在內容溢位的情況時，scroll屬性大於client屬性，divobj.scrollheight包括被隱藏部分。scrollheight可用於獲取div的wholeheight以實現滾動到底部載入。

【注意】scrollheight屬性存在相容性問題，chrome和safari瀏覽器中，scrollheight包含padding-bottom；而ie和firefox不包含padding-bottom.

安利乙個好東西：.getboundingclientrect().top/right/bottom/left;     //div的各邊距可視區的距離.

可視區載入：

1

function
showdiv()
8 }

innerwidth() | innerheight()：可讀寫。（length） | function（index，oldwidth）

outerwidth(boolean) | outerheight(boolean)：為true時包括margin，false時不包括margin.

.scrolltop() | .scrollleft：被卷走的寬高。

.offset().top/left ：相對於document.

.position().top/left ：相對於offsetparent.

常用的屬性：

$(window).height();--可視區高

$(window).scrolltop();--滾上去的部分

$(document).height();--整個文件的高

滾動到底部：

$(window).scroll(function

()});

關於元素寬高 邊距屬性及應用

1 width auto 預設值。瀏覽器可計算出實際的寬度。length 使用 px cm 等單位定義寬度。定義基於包含塊 父元素 寬度的百分比寬度。inherit 規定應該從父元素繼承 width 屬性的值。2 padding length 規定以具體單位計的填充值，比如畫素 厘公尺等。預設值是 ...

jq獲取常用寬高

獲取瀏覽器顯示區域 可視區域 的高度 window height 獲取瀏覽器顯示區域 可視區域 的寬度 window width 獲取頁面的文件高度 document height 獲取頁面的文件寬度 document width 瀏覽器當前視窗文件body的高度 document.body hei...

寬高自適應及居中

1.寬度自適應 語法 width 100 注 1.塊元素預設寬度為100 繼承父元素的寬度 2.寬度自適應通常運用在通欄效果中 2.高度自適應 語法 height auto 或者不設定高度 1.最小高度 語法 min height 數值 單位 注 ie6不識別min height屬性，解決方案如下 ...