| 導購 | 订阅 | 在线投稿
分享
 
 
 

Javascript頁面寬度高度

來源:互聯網網民  2008-09-09 07:29:22  評論

關于獲取各種浏覽器可見窗口大小的一點點研究

<script>

function getInfo()

{

var s = "";

s += " 網頁可見區域寬:"+ document.body.clientWidth;

s += " 網頁可見區域高:"+ document.body.clientHeight;

s += " 網頁可見區域寬:"+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";

s += " 網頁可見區域高:"+ document.body.offsetHeight + " (包括邊線的寬)";

s += " 網頁正文全文寬:"+ document.body.scrollWidth;

s += " 網頁正文全文高:"+ document.body.scrollHeight;

s += " 網頁被卷去的高(ff):"+ document.body.scrollTop;

s += " 網頁被卷去的高(ie):"+ document.documentElement.scrollTop;

s += " 網頁被卷去的左:"+ document.body.scrollLeft;

s += " 網頁正文部分上:"+ window.screenTop;

s += " 網頁正文部分左:"+ window.screenLeft;

s += " 屏幕分辨率的高:"+ window.screen.height;

s += " 屏幕分辨率的寬:"+ window.screen.width;

s += " 屏幕可用工作區高度:"+ window.screen.availHeight;

s += " 屏幕可用工作區寬度:"+ window.screen.availWidth;

s += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色";

s += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸";

//alert (s);

}

getInfo();

</script>

在我本地測試當中:

在IE、FireFox、Opera下都可以使用

document.body.clientWidth

document.body.clientHeight

即可獲得,很簡單,很方便。

而在公司項目當中:

Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox則使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原來是W3C的標准在作怪啊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在頁面中添加這行標記的話

在IE中:

document.body.clientWidth ==> BODY對象寬度

document.body.clientHeight ==> BODY對象高度

document.documentElement.clientWidth ==> 可見區域寬度

document.documentElement.clientHeight ==> 可見區域高度

在FireFox中:

document.body.clientWidth ==> BODY對象寬度

document.body.clientHeight ==> BODY對象高度

document.documentElement.clientWidth ==> 可見區域寬度

document.documentElement.clientHeight ==> 可見區域高度

?

在Opera中:

document.body.clientWidth ==> 可見區域寬度

document.body.clientHeight ==> 可見區域高度

document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)

document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)

而如果沒有定義W3C的標准,則

IE爲:

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox爲:

document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)

Opera爲:

document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)

真是一件麻煩事情,其實就開發來看,甯可少一些對象和方法,不使用最新的標准要方便許多啊。

 
特别声明:以上内容(如有图片或视频亦包括在内)为网络用户发布,本站仅提供信息存储服务。
 
關于獲取各種浏覽器可見窗口大小的一點點研究 <script> function getInfo() { var s = ""; s += " 網頁可見區域寬:"+ document.body.clientWidth; s += " 網頁可見區域高:"+ document.body.clientHeight; s += " 網頁可見區域寬:"+ document.body.offsetWidth + " (包括邊線和滾動條的寬)"; s += " 網頁可見區域高:"+ document.body.offsetHeight + " (包括邊線的寬)"; s += " 網頁正文全文寬:"+ document.body.scrollWidth; s += " 網頁正文全文高:"+ document.body.scrollHeight; s += " 網頁被卷去的高(ff):"+ document.body.scrollTop; s += " 網頁被卷去的高(ie):"+ document.documentElement.scrollTop; s += " 網頁被卷去的左:"+ document.body.scrollLeft; s += " 網頁正文部分上:"+ window.screenTop; s += " 網頁正文部分左:"+ window.screenLeft; s += " 屏幕分辨率的高:"+ window.screen.height; s += " 屏幕分辨率的寬:"+ window.screen.width; s += " 屏幕可用工作區高度:"+ window.screen.availHeight; s += " 屏幕可用工作區寬度:"+ window.screen.availWidth; s += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色"; s += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸"; //alert (s); } getInfo(); </script> 在我本地測試當中: 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可獲得,很簡單,很方便。 而在公司項目當中: Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox則使用 document.documentElement.clientWidth document.documentElement.clientHeight 原來是W3C的標准在作怪啊 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> 如果在頁面中添加這行標記的話 在IE中: document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.documentElement.clientWidth ==> 可見區域寬度 document.documentElement.clientHeight ==> 可見區域高度 在FireFox中: document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.documentElement.clientWidth ==> 可見區域寬度 document.documentElement.clientHeight ==> 可見區域高度 ? 在Opera中: document.body.clientWidth ==> 可見區域寬度 document.body.clientHeight ==> 可見區域高度 document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬) document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高) 而如果沒有定義W3C的標准,則 IE爲: document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox爲: document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高) Opera爲: document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高) 真是一件麻煩事情,其實就開發來看,甯可少一些對象和方法,不使用最新的標准要方便許多啊。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有