js獲取body高度兼容ie_js獲取瀏覽器高度+上下滾動條的高度也就是整個網頁的高度需求要求兼容ie6

㈠ js 如何獲得瀏覽器的高度

要在js中獲得瀏覽器的高度可以參考以下步驟(具體代碼見最後）：
1、outerHeight屬性設置或返回一個窗口的外部高度，包括所有界面元素（如工具欄/滾動條）。
2、outerWidth屬性設置或返回窗口的外部寬度，包括所有的界面元素（如工具欄/滾動）。
3、innerheight 返回窗口的文檔顯示區的高度。
4、innerwidth 返回窗口的文檔顯示區的寬度。
補充：
在瀏覽器兼容方面：
1、所有主流瀏覽器都支持 outerWidth 和 outerHeight 屬性。
注意：IE 8 及更早 IE 版本不支持該屬性。
2、所有主流瀏覽器都支持 innerWidth 和 innerHeight 屬性。
注意：IE 8 及更早 IE版本不支持這兩個屬性。

獲取代碼：
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<title>請調整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">

瀏覽器窗口的實際高度: <input type="text" name="availHeight" size="4"/><br />
瀏覽器窗口的實際寬度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">

</script>
</body>
</html>

㈡ js獲取瀏覽器高度+上下滾動條的高度，也就是整個網頁的高度，需求，要求兼容ie6,7,火狐等主流瀏覽器

您好！很高興為您答疑！

給您提供一個代碼，根據需要稍做修改就可以了，兼容各瀏覽器：
function getViewSizeWithoutScrollbar(){//不包含滾動條
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//包含滾動條
if(window.innerWidth){
return {
width : window.innerWidth,
height: window.innerHeight
}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}
}else{
return {
width : document.documentElement.clientWidth + getScrollWith(),
height: document.documentElement.clientHeight + getScrollWith()
}
}
}
您可以在火狐社區了解更多內容。希望我的回答對您有所幫助，如有疑問，歡迎繼續在本平台咨詢。

㈢在IE中JS 如何獲取滾動條的高度

var x=document.body.scrollTop;
alert(x);

㈣如何用JS動態獲取瀏覽器的寬高

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高）

網頁可見區域寬： 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 相對文檔的水平座標+垂直方向滾動的量

示例：

varwinWidth=0;
varwinHeight=0;
functionfindDimensions()//函數：獲取尺寸
{
//獲取窗口寬度
if(window.innerWidth)
winWidth=window.innerWidth;
elseif((document.body)&&(document.body.clientWidth))
winWidth=document.body.clientWidth;
//獲取窗口高度
if(window.innerHeight)
winHeight=window.innerHeight;
elseif((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;

㈤我通過JS改變DIV高度，但是在IE7下有問題

盒子模型是CSS中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 IE 盒子模型和標准 W3C 盒子模型。

盒子模型是CSS中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 IE 盒子模型和標准 W3C 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟悉的標准盒子模型：

從上圖可以看到 IE 盒子模型的范圍也包括 margin、border、padding、content，和標准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
例：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為
200px、高為 50px，如果用標准 W3C 盒子模型解釋，那麼這個盒子需要佔據的位置為：寬 20*2 1*2 10*2
200=262px、高 20*2 1*2*10*2 50=112px，盒子的實際大小為：寬 1*2 10*2 200=222px、高 1*2
10*2 50=72px；如果用IE 盒子模型，那麼這個盒子需要佔據的位置為：寬 20*2 200=240px、高 20*2
50=70px，盒子的實際大小為：寬 200px、高 50px。
那應該選擇哪中盒子模型呢？當然是「標准 W3C 盒子模型」了。怎麼樣才算是選擇了「標准 W3C
盒子模型」呢？很簡單，就是在網頁的頂部加上 DOCTYPE 聲明。如果不加 DOCTYPE 聲明，那麼各個瀏覽器會根據自己的行為去理解網頁，即
IE 瀏覽器會採用 IE 盒子模型去解釋你的盒子，而 FF 會採用標准 W3C
盒子模型解釋你的盒子，所以網頁在不同的瀏覽器中就顯示的不一樣了。反之，如果加上了 DOCTYPE 聲明，那麼所有瀏覽器都會採用標准 W3C
盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。
再用 jQuery 做的例子來證實一下。
代碼1：

<html>
<head>
<title>你用的盒子模型是？</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "標准W3C":"IE";
document.write("您的頁面目前支持：" sBox "盒子模型");
</script>
</head>
<body>
</body>
</html>
上面的代碼沒有加上 DOCTYPE 聲明，在 IE 瀏覽器中顯示「IE盒子模型」，在 FF 瀏覽器中顯示「標准 W3C 盒子模型」。
代碼2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>你用的盒子模型是標准W3C盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "標准W3C":"IE";
document.write("您的頁面目前支持：" sBox "盒子模型");
</script>
</head>
<body>
</body>
</html>
代碼2 與代碼1 唯一的不同的就是頂部加了 DOCTYPE 聲明。在所有瀏覽器中都顯示「標准 W3C 盒子模型」。
所以為了讓網頁能兼容各個瀏覽器，讓我們用標准 W3C 盒子模型。

㈥ jquery js獲取移動設備瀏覽器高度

在js使用過程中可能會根據要求獲取瀏覽器高度和寬度。
一、獲取瀏覽器的高度版：
jquery代碼直接使用 $(window).height();
原生態權JS代碼需要考慮頁面DOCTYPE的聲明，使用以下代碼：
<script>
var w=document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
alert(w);
</script>
二、獲取瀏覽器的寬度：
jquery代碼直接使用 $(window).With();
原生態JS代碼：
var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth;

㈦ IE瀏覽器下如何用js獲取單元格高度（未設置高度，默認高度）

#id.offsetHeight

㈧【急】高分求完整的js獲取瀏覽器個要素高度寬度值的方法！！！！

在IE下：
獲取瀏覽器可見區域寬度：width = document.documentElement.clientWidth;
獲取瀏覽器可見區域高度：height = document.documentElement.clientHeight;
Body對象寬度：width = document.body.clientWidth;
Body對象高度：height = document.body.clientHeight;
firefox和IE一樣...

在Opera下：
獲取瀏覽器可見區域寬度：width = document.body.clientWidth;
獲取瀏覽器可見區域高度：height = document.body.clientHeight;
Body對象寬度：width = document.documentElement.clientWidth;
Body對象高度：height = document.documentElement.clientHeight;

在沒有定義W3C標准下...
三種瀏覽器均為：
獲取瀏覽器可見區域寬度：width = document.documentElement.clientWidth;
獲取瀏覽器可見區域高度：height = document.documentElement.clientHeight;

導航:首頁 > 編程語言 > js獲取body高度兼容ie

js獲取body高度兼容ie

與js獲取body高度兼容ie相關的資料

友情鏈接