快捷導(dǎo)航

js獲取height和width的方法說明

更新時間：2013年01月06日 17:22:02 作者：

js獲取height和width屬性的值在日常開發(fā)中很常見，于是本人搜集整理了一下，感興趣的朋友可以參考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>js獲取height和width總結(jié)</title> 
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/> 
<script type="text/javascript" src="js/jquery-1.5.2.js"></script> 
<script type="text/javascript" > 
$(document).ready(function() 
{ 
alert("瀏覽器當(dāng)前窗口可視區(qū)域高度:"+$(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度 
alert("瀏覽器當(dāng)前窗口文檔的高度:"+$(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 
alert("瀏覽器當(dāng)前窗口文檔body的高度:"+$(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度 
alert("瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin:"+$(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin 
alert("瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?"+($(window).width())); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾?
alert("瀏覽器當(dāng)前窗口文檔對象寬度:"+$(document).width());//瀏覽器當(dāng)前窗口文檔對象寬度 
alert("瀏覽器當(dāng)前窗口文檔body的高度:"+$(document.body).width());//瀏覽器當(dāng)前窗口文檔body的高度 
alert("瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin:"+$(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin 
alert("顯示器分辨率，只能用JavaScript代碼獲取高度:"+screen.height);//顯示器分辨率，只能用JavaScript代碼獲取 
alert("顯示器分辨率，只能用JavaScript代碼獲取寬度:"+screen.width); 
}) ; 


</script> 

</head> 
<body> 
<ul> 
<li> 網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth </li> 
<li> 網(wǎng)頁可見區(qū)域高： document.body.clientHeight </li> 
<li> 網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)</li> 
<li> 網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高) </li> 
<li> 網(wǎng)頁正文全文寬： document.body.scrollWidth </li> 
<li> 網(wǎng)頁正文全文高： document.body.scrollHeight </li> 
<li> 網(wǎng)頁被卷去的高： document.body.scrollTop </li> 
<li> 網(wǎng)頁被卷去的左： document.body.scrollLeft </li> 
<li> 網(wǎng)頁正文部分上： window.screenTop </li> 
<li> 網(wǎng)頁正文部分左： window.screenLeft </li> 
<li> 屏幕分辨率的高： window.screen.height</li> 
<li> 屏幕分辨率的寬： window.screen.width </li> 
<li> 屏幕可用工作區(qū)高度： window.screen.availHeight</li> 
<li> 屏幕可用工作區(qū)寬度： window.screen.availWidth </li> 
</ul> 
</body> 
</html> 