js獲取height和width的方法說明
更新時(shí)間：2013年01月06日 17:22:02 作者：
js獲取height和width屬性的值在日常開發(fā)中很常見，于是本人搜集整理了一下，感興趣的朋友可以參考下
復(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>
您可能感興趣的文章:
- JS獲取scrollHeight問題想到的標(biāo)準(zhǔn)問題
- js中top、clientTop、scrollTop、offsetTop的區(qū)別 文字詳細(xì)說明版
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差別介紹
- js中top/parent/frame概述及案例應(yīng)用
- 利用JS解決ie6不支持max-width,max-height問題的方法
- js中的preventDefault與stopPropagation詳解
- js中top的作用深入剖析
- window.top[_CACHE]實(shí)現(xiàn)多個(gè)jsp頁面共享一個(gè)js對象
- JS獲取iframe中marginHeight和marginWidth屬性的方法
- JS中完美兼容各大瀏覽器的scrolltop方法
- js中不同的height, top的區(qū)別對比
相關(guān)文章
用js有很久了，但都沒有深究過js的數(shù)組形式。偶爾用用也就是簡單的string.split(char)。2009-04-04
Function.prototype.apply()與Function.prototype.call()小結(jié)
JavaScript 中，某個(gè)函數(shù)的參數(shù)數(shù)量是不固定的，因此要說適用條件的話，當(dāng)你的參數(shù)是明確知道數(shù)量時(shí)，用 call，而不確定的時(shí)候，用 apply，然后把參數(shù) push 進(jìn)數(shù)組傳遞進(jìn)去。當(dāng)參數(shù)數(shù)量不確定時(shí)，函數(shù)內(nèi)部也可以通過 arguments 這個(gè)數(shù)組來便利所有的參數(shù)2016-04-04
JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法
這篇文章主要介紹了JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
怎么通過onclick事件獲取js函數(shù)返回值（代碼少）
這篇文章主要介紹了怎么通過onclick事件獲取js函數(shù)返回值,需要的朋友可以參考下2015-07-07
Javascript中indexOf()和lastIndexOf應(yīng)用方法實(shí)例
這篇文章主要介紹了JavaScript中的indexOf()和lastIndexOf()方法使用實(shí)例,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),有需要的朋友可以參考下。2016-08-08
Javascript學(xué)習(xí)筆記2 函數(shù)
在Javascript中，function才是Javascript的第一型。當(dāng)我們寫下一段函數(shù)時(shí)，其實(shí)不過是建立了一個(gè)function類型的實(shí)體。2010-01-01
scrollTop屬性是什么? 有些情況下,“元素中內(nèi)容”的高度會(huì)超過“元素本身”的高度,2009-06-06
這篇文章主要介紹了JavaScript匿名函數(shù)和閉包的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了S的組成與基本語法，JS 主要是用來開發(fā)前端,但是也可以做別的,JS 現(xiàn)在是一個(gè) "通用" 的編程語言，感興趣的小伙伴可以參考閱讀2023-04-04
只要是寫過點(diǎn)JS代碼，很簡單一個(gè)var 就完事了。那對于JS編譯器背后它又發(fā)生了什么呢？那就一步步通過代碼來講起,需要了解的朋友研究下哦2012-12-12