javascript 獲取網頁各種寬度

頁可見區域寬：document.body.clientWidth

網頁可見區域高：document.body.clientHeight

網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)

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

網頁正文全文寬：document.body.scrollWidth

網頁正文全文高：document.body.scrollHeight

網頁被卷去的高：document.body.scrollTop

網頁被卷去的左：document.body.scrollLeft

網頁正文部分上：window.screenTop

網頁正文部分左：window.screenLeft

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

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

屏幕可用工作區高度：window.screen.availHeight

屏幕可用工作區寬度：window.screen.availWidth

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

scrollHeight: 獲取對象的滾動高度。

scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離

scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離

scrollWidth:獲取對象的滾動寬度

offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度

offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置

offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置

event.clientX 相對文檔的水平座標

event.clientY 相對文檔的垂直座標

event.offsetX 相對容器的水平坐標

event.offsetY 相對容器的垂直坐標

document.documentElement.scrollTop 垂直方向滾動的值

event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量

IE，FireFox 差異如下：

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均無關)

網頁可見區域寬： document.body.clientWidth

網頁可見區域高： document.body.clientHeight

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)

網頁可見區域高： document.body.offsetHeight (包括邊線的高)

網頁正文全文寬： document.body.scrollWidth

網頁正文全文高： document.body.scrollHeight

網頁被卷去的高： document.body.scrollTop

網頁被卷去的左： document.body.scrollLeft

網頁正文部分上： window.screenTop

網頁正文部分左： window.screenLeft

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

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

屏幕可用工作區高度： window.screen.availHeight

屏幕可用工作區寬度： window.screen.availWidth

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

技術要點

本節代碼主要使用了Document對象關于窗口的一些屬性，這些屬性的主要功能和用法如下。

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

Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。

Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。

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

實現代碼

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

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

<head>

<title>請調整瀏覽器窗口</title>

</head>

<body>

<h2 align="center">請調整瀏覽器窗口大小</h2><hr>

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

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

</form>

<!--

var winWidth = 0;

var winHeight = 0;

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

{

//獲取窗口寬度

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內部對body進行檢測，獲取窗口大小

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

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//結果輸出至兩個文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//調用函數，獲取數值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解讀

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

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

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

（4）再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。

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

（6）在JavaScript代碼的最后，通過調用findDimensions ( )函數，完成整個操作。

天我們說下HTML標簽中的div、span和圖像標簽。其實div和span是上一節就要講的標簽內容，但是當時時間比較晚了，就沒有說。

<div>和<span>是沒有語義的，就是一個盒子，用來裝內容的。這和android開發中的font很像，也是一個個的盒子，將內部包起來。可以這么來寫:

<div>這是頭部</div> <span>我是內容</span> 兩個都是雙標簽。

div是division的縮寫，表示分割分區(豎著); span意為跨度、跨距(橫著)。div單獨占一行，實例如下: 理解為一個大盒子

看下HTML代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>我是一個div標簽，我自己獨占一行</div>

</body>

</html>

可以看到，寫了兩個<div>標簽，一個占一行

<span>一行可以放很多個標簽，理解為小盒子，舉例如下:

代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>我是一個div標簽，我自己獨占一行</div>

<span>我是一個span標簽</span>

</body>

</html>

效果如下:

接下來說一個很重要的標簽---圖像標簽

HTML標簽中，使用<img>標簽用于定義HTML頁面中的圖像，是一個單標簽。img是image的縮寫，src是<img>標簽的必須屬性，用于指定圖像文件的路徑和文件名。屬性，指的是屬于這個圖像標簽的特性。對于圖片，需要將圖片和html文件放到一起。

代碼圖示：

代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

效果如下:

如果我們再加入同樣的一行代碼，看看顯示(加上換行)

代碼如圖:

代碼內容如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

效果如下:

可以看到<img src="xxx"> 后面不寫 / 也是可以的，<br />后面不寫斜杠也行，即使都是用單個的情況。src是source的縮寫。

接下來說下圖像標簽的其他屬性:

alt 替換文本，圖像不能顯示的文字

title 文本，提示文本，鼠標放到圖像上，顯示的文字，類似于 hover

width 像素，設置圖像的寬度(和android中的差不多)

height 像素，設置圖像的高度(和android中的差不多)

border 像素，設置圖像的邊框粗細

具體我們看下實例:

代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

alt替換文本，圖像顯示不出來的時候用文本代替<br />

</body>

</html>

看下展示效果:

發現 alt后替換文本并沒有起作用，圖像還是顯示的。這是為什么呢？

其實原因很簡單，就是先判斷src后的圖像是否存在，如果存在，就展示圖像，如果不存在，就展示文本。上面語句中，圖像的地址是正確的，所以會展示圖像。可以將圖像地址進行修改。我們再試下

代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

alt替換文本，圖像顯示不出來的時候用文本代替<br />

</body>

</html>

我們來看看效果，alt后的文本是否能展示

說明我們的測試是正確的。

2.title 提示文本

先看效果:

看下代碼和代碼展示：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

title提示文本<br />

<br />

</body>

</html>

好的，今天先到這里，一會我們繼續。

絡編程之Span標簽。

同學們好，今天我將為大家分享Span標簽的相關知識。Span標簽是一種無意義的行內元素，沒有任何實際效果。如果不加CSS，它和不加文字沒有任何區別。但是，它非常重要，因為它可以方便地對元素進行分組，以不同的樣式顯示。

先來看看今天的示例效果。在這個網頁上，我使用了CSS和JS分別演示了Span標簽的效果。現在，一共有兩行文字，第一行中的無語義和元素加上了Span標簽，可以看到它們有藍色并且加粗。但除此之外，這句話和普通文字沒有任何區別。

第二行中，我使用JS代碼實現了對Span標簽動態數字的變化。點擊0時，每隔100毫秒，0的數字開始自動加1。再次點擊時，數字暫停增加。如果繼續點擊，數字又開始增加。現在，讓我們來看一下實現代碼。Span標簽和div標簽一樣，也是一種無屬性的包圍標簽。它的常用屬性包括ID、style、class，用法和寫法與div相同。但是，Span標簽更多地用于對文字的操作。

雖然您可以像使用div一樣使用CSS來設置CSS，但總感覺怪怪的。實際上，這應該被稱為XHTML和CSS布局。Span標簽沒有固定的格式，只有當它應用CSS時才會產生視覺上的變化。如果不對Span應用CSS，那么Span標簽中的文本與其他文本沒有任何視覺上的差異。它主要是提供了將部分文字獨立出來的方式，可以替代以前的Font標簽。Span標簽的實用性主要體現在CSS和JS上，它的用法很簡單，一眼就能看懂。還有時間，簡單介紹一下控制JS的代碼。ID是命名onclick是鼠標點擊事件。當點擊這個Span時，將調用setclock函數。通過b變量控制是暫停還是開始增加數字。如果b為假，將開始調用SpanC函數。如果b為真，將清除計時器并暫停。

今天的分享就到這里。請記住Span標簽的用法和寫法。所有的案例和相關文檔都可以向我索取。我們下期再見。如果您想學習網絡編程、服務端編程、數據庫或算法，請關注我們。

在線咨詢

上一篇：HTML5常見的基礎標簽（7）你所不知道的iframe和frameset
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

javascript 獲取網頁各種寬度

您的項目需求