javascript 獲取網(wǎng)頁各種寬度

頁可見區(qū)域?qū)挘篸ocument.body.clientWidth

網(wǎng)頁可見區(qū)域高：document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)

網(wǎng)頁正文全文寬：document.body.scrollWidth

網(wǎng)頁正文全文高：document.body.scrollHeight

網(wǎng)頁被卷去的高：document.body.scrollTop

網(wǎng)頁被卷去的左：document.body.scrollLeft

網(wǎng)頁正文部分上：window.screenTop

網(wǎng)頁正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的寬：window.screen.width

屏幕可用工作區(qū)高度：window.screen.availHeight

屏幕可用工作區(qū)寬度：window.screen.availWidth

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 獲取對(duì)象的滾動(dòng)高度。

scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離

scrollWidth:獲取對(duì)象的滾動(dòng)寬度

offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

event.clientX 相對(duì)文檔的水平座標(biāo)

event.clientY 相對(duì)文檔的垂直座標(biāo)

event.offsetX 相對(duì)容器的水平坐標(biāo)

event.offsetY 相對(duì)容器的垂直坐標(biāo)

document.documentElement.scrollTop 垂直方向滾動(dòng)的值

event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

IE，F(xiàn)ireFox 差異如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

網(wǎng)頁可見區(qū)域高： document.body.clientHeight

網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)

網(wǎng)頁正文全文寬： document.body.scrollWidth

網(wǎng)頁正文全文高： document.body.scrollHeight

網(wǎng)頁被卷去的高： document.body.scrollTop

網(wǎng)頁被卷去的左： document.body.scrollLeft

網(wǎng)頁正文部分上： window.screenTop

網(wǎng)頁正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的寬： window.screen.width

屏幕可用工作區(qū)高度： window.screen.availHeight

屏幕可用工作區(qū)寬度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技術(shù)要點(diǎn)

本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。

要得到窗口的尺寸，對(duì)于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測(cè)窗口的真實(shí)尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window對(duì)象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對(duì)象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的標(biāo)簽。Document對(duì)象的documentElement屬性則表示HTML文檔的根節(jié)點(diǎn)。

document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

實(shí)現(xiàn)代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>請(qǐng)調(diào)整瀏覽器窗口</title>

</head>

<body>

<h2 align="center">請(qǐng)調(diào)整瀏覽器窗口大小</h2><hr>

瀏覽器窗口的實(shí)際高度: <input type="text" name="availHeight" size="4"><br>

瀏覽器窗口的實(shí)際寬度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函數(shù)：獲取尺寸

{

//獲取窗口寬度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//獲取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通過深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//結(jié)果輸出至兩個(gè)文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//調(diào)用函數(shù)，獲取數(shù)值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解讀

（1）程序首先建立一個(gè)表單，包含兩個(gè)文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會(huì)隨窗口大小的改變而變化。

（2）在隨后的JavaScript代碼中，首先定義了兩個(gè)變量winWidth和winHeight，用于保存窗口的高度值和寬度值。

（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個(gè)變量中。

（4）再通過深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小，并存儲(chǔ)在前述兩個(gè)變量中。

（5）在函數(shù)的最后，通過按名稱訪問表單元素，結(jié)果輸出至兩個(gè)文本框。

（6）在JavaScript代碼的最后，通過調(diào)用findDimensions ( )函數(shù)，完成整個(gè)操作。

咱們來看一組數(shù)據(jù)：

首頁頁面寬度 px：

Yahoo! 950

淘寶 950

MySpace 960

新浪 950

網(wǎng)易 960

Live Search 958

搜狐 950

優(yōu)酷 960

AOL 960

上面列舉的都是Alexa全球排名前100的站點(diǎn)，它們的首頁寬度為950px/960px. 除了微軟的Live Search, 這些站點(diǎn)有個(gè)共同特點(diǎn)：頁面結(jié)構(gòu)較復(fù)雜，都可以認(rèn)為是門戶型網(wǎng)站。

再來看看Google, YouTube, Facebook, Flickr!, eBay等知名站點(diǎn)，它們的首頁寬度沒什么固定規(guī)律，共同的特點(diǎn)是：功能專一，頁面結(jié)構(gòu)相對(duì)簡單。

根據(jù)上面的簡單分析可以認(rèn)為：當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時(shí)，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px.

這是一件很有趣的事情，為什么要選擇這個(gè)寬度呢？這個(gè)寬度值究竟有什么魔力？

神奇的960

設(shè)計(jì)師們對(duì)蘋果情有獨(dú)衷。在 1024 x 768 的分辨率下，打開Firefox：

自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁的實(shí)際大小為上圖中的紅色部分，高寬為 960 x 650.

有趣的960就這樣出現(xiàn)了。是的，可以認(rèn)為一切就這么簡單。柵格系統(tǒng)最早出現(xiàn)在平面設(shè)計(jì)領(lǐng)域，設(shè)計(jì)師們愛用蘋果，蘋果下瀏覽器的默認(rèn)寬度為960px, 于是960就這么“自然”地出現(xiàn)了。

數(shù)字背后的奧妙

上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。蘋果系統(tǒng)的設(shè)計(jì)者們?cè)跊]有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有奧妙。

科學(xué)界有很多問題都可以歸結(jié)到數(shù)學(xué)問題上，我們也從數(shù)學(xué)著手：

960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480共26種（26 = 7 * 2 * 2 - 2, 減去2是去掉1和960自身），我們標(biāo)記為：

N(960) = N(2^6 * 3 * 5) = 26

根據(jù)上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22N(480) = N(2^5 * 3 * 5) = 22N(720) = N(2^4 * 3^2 * 5) = 28N(750) = N(2 * 3 * 5^3) = 14N(800) = N(2^5 * 5^2) = 16N(960) = N(2^6 * 3 * 5) = 26N(1000) = N(2^3 * 5^3) = 14N(1024) = N(2^10) = 9N(1440) = N(2^6 * 3^2 * 5) = 34N(1920) = N(2^7 * 3 * 5) = 30

根據(jù)直覺（嚴(yán)格證明也不難，不過還是留給數(shù)學(xué)系的學(xué)生去證明吧），我們得到一個(gè)有趣的結(jié)論：

要使得N(width)較大，width的取值有兩個(gè)系列：

A系列： …, 320, 720, 1440, …

感覺有用的朋友，點(diǎn)個(gè)關(guān)注，給個(gè)收藏，就是對(duì)我堅(jiān)持更新，最好的支持

TML標(biāo)簽

基本標(biāo)簽

HTML頁面中內(nèi)容是由HTML標(biāo)簽組織起來的，如頁面中的文本、圖像、Flash視頻文件等都是通過HTML標(biāo)簽合理地顯示在頁面的各個(gè)位置。

1 標(biāo)題標(biāo)簽<h1>～<h6>

標(biāo)題標(biāo)簽表示一段文字的標(biāo)題（主題），并且支持多層次的內(nèi)容結(jié)構(gòu)。HTNL.共提供了6級(jí)標(biāo)題，分別為<h1>～<h6>，并賦予了標(biāo)題一定的外觀，所有標(biāo)題字體加粗，其中山<h1>字號(hào)最大，<h6>字號(hào)最小.

2.圖像標(biāo)簽<img>

在網(wǎng)頁中常用的圖像格式有4種，即JPG、GIF、BMP.PNG，其中使用比較多的是JPG、GIF和PNG，大多數(shù)瀏覽器都可以顯示這些圖像。

顯示圖像的語法：

< img src="ur1" alt="文本" width="x" height="y"/>

在語法中：

a、SrC屬性：表示顯示圖像的地址。

b、alt屬性：指定圖像的替代文本，當(dāng)圖像無法顯示時(shí)（如圖片路徑錯(cuò)誤或網(wǎng)速太慢等）替代顯示的文本，這樣，即使圖像無法顯示，用戶還可以看到網(wǎng)頁丟失的信息，所以為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好地顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來說是非常有幫助的。

c、width屬性：表示圖像寬度.

d、height屬性：表示圖像高度。

3.段落標(biāo)簽<p>

顧名思義，段落標(biāo)簽表示將一段文字組成一系列段落內(nèi)容，這樣做的目的是內(nèi)容應(yīng)用某些格式和布局，使各個(gè)段落的邏輯更清晰明了。在HTML文檔中，段落通過<p>標(biāo)簽定義。段落標(biāo)簽<p>表示段落的開始，</p >表示段落的結(jié)束。

4.換行標(biāo)簽<br/>

在希望不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行，則使用<br>標(biāo)簽。<br>是一個(gè)空的HTML標(biāo)簽，由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽。

注意：

使用<b>和<br>的結(jié)果一樣，在XHTML以及未來的HTML版本中，根據(jù)W3C規(guī)范，不允許使用沒有結(jié)束標(biāo)簽的HTML元素，因此使用<br>頁面更規(guī)范，有更長遠(yuǎn)的保障。

5.水平線標(biāo)簽<hr/>

水平線標(biāo)簽表示一條水平線，注意該標(biāo)簽與<br>標(biāo)簽一樣，沒有結(jié)束標(biāo)簽，直接使用<hr/>表示標(biāo)簽的開始和結(jié)束。

使用以上講解的基本標(biāo)簽，就可以進(jìn)行網(wǎng)頁內(nèi)容排版了。

在線咨詢

上一篇：HTML 列表
下一篇：7套漸變風(fēng)企業(yè)宣傳介紹PPT模板，現(xiàn)代感十足！

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

javascript 獲取網(wǎng)頁各種寬度

您的項(xiàng)目需求