JS获取ie可用宽度问题，有很多结果，我该用哪个？、

屡败屡战数马援 2008-11-15 03:45:35

我的意思是IE的可用宽度，不包括边框，工具栏，状态栏和滚动条，仅仅是显示html内容的部分。
我到网上找了一下，发现JS里有许多获取不同宽度的代码，我归纳了一下，发现得出的结果不同，而且，在不同情况下结果同样不同。
首先是JS代码，很简单，调用使用的是body的onload事件：



var s = "";

s += "document.body.clientWidth：" + document.body.clientWidth;

s += "<br />document.documentElement.offsetWidth：" + document.documentElement.offsetWidth;

s += "<br />document.body.offsetWidth：" + document.body.offsetWidth;

s += "<br />document.body.scrollWidth：" + document.body.scrollWidth;

s += "<br />window.screen.width：" + window.screen.width;

s += "<br />window.screen.availWidth：" + window.screen.availWidth;

情况1：这个代码使用window.alert显示，并且body中没有任何内容，即 <body></body>的情况下，结果是：
---------------------------
Windows Internet Explorer
---------------------------
document.body.clientWidth：967
document.documentElement.clientHeight：608
document.documentElement.offsetWidth：987
document.body.offsetWidth：967
document.body.scrollWidth：967
window.screen.width：1024
window.screen.availWidth：1024
---------------------------
确定
---------------------------

情况2：如果body区域内有内容，并且为一个空div，此div有id属性，并且style被设置为width:100%后，使用innerHtml方法将结果填充到div内的宽度是：
document.body.clientWidth：967
document.documentElement.offsetWidth：987
document.body.offsetWidth：967
document.body.scrollWidth：967
window.screen.width：1024
window.screen.availWidth：1024

情况3 以上两次结果是ie没有最大化，但我使用手工把ie窗口拉到最大，如果ie最大化的话，结果是：
document.body.clientWidth：983
document.documentElement.offsetWidth：1003
document.body.offsetWidth：983
document.body.scrollWidth：983
window.screen.width：1024
window.screen.availWidth：1024

// *************************

我的问题就是，这么多方法里头，我该用哪个方法来进行客户端宽度检测，哪个方法误差最小？谢谢！

...全文

659 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

tiyuzhongxin789 2008-11-17

打赏
举报

document.body.offsetWidth
相对宽度
document.body.scrollWidth
滚动宽度

另外要考虑浏览器版本
可以用

<div style="width:2000px;height:1000px;"> </div>

测试

阿云ivan 2008-11-17

打赏
举报

http://blog.csdn.net/avon520/archive/2008/07/28/2724094.aspx

asdfgh_5982 2008-11-17

打赏
举报



/*ScrollTop*/

function getScrollTop() {    

    var scrollPos = 0;     

    if (typeof window.pageYOffset != 'undefined') {     

       scrollPos = window.pageYOffset;     

    }     

    else if (typeof window.document.compatMode != 'undefined' &&     

       window.document.compatMode != 'BackCompat') {     

       scrollPos = window.document.documentElement.scrollTop;     

    }     

    else if (typeof window.document.body != 'undefined') {     

       scrollPos = window.document.body.scrollTop;     

    }     

    return scrollPos;    

}

/*end ScrollTop*/



/*ScrollLeft*/

function getScrollLeft(){

    var scrollPos =0;

    if (typeof window.pageXOffset != 'undefined') {     

       scrollPos = window.pageXOffset;     

    }     

    else if (typeof window.document.compatMode != 'undefined' &&     

       window.document.compatMode != 'BackCompat') {     

       scrollPos = window.document.documentElement.scrollLeft;     

    }     

    else if (typeof window.document.body != 'undefined') {     

       scrollPos = window.document.body.scrollLeft;     

    }     

    return scrollPos;    

}

/*end ScrollLeft*/

这段代码应该有这方面的提示，什么时候选用不同的方法取值

wtcsy 2008-11-15

打赏
举报

document.documentElement.offsetWidth：是指根元素,就是html标签 ie ff都是这样的
document.body.offsetWidth body标签
document.body.scrollWidth 滚动条的那个地方的长度了长度了....

ie6下的测试
document.documentElement.offsetWidth：1024 //ff 2.0 1024
document.body.offsetWidth：1024 //ff 1008
document.body.scrollWidth：1004 //ff 1024
(ie下怎么跟2楼不一样了 html标签的长度 != body标签的长度)

ff下如果没有元素的话
document.body.offsetHeight 是为0的当有元素的时候,他的高度是元素高度之和(当然是2个同行的元素只算一个高度)
大概就知道这么点了

myvicy 2008-11-15

打赏
举报

document.body.offsetWidth
相对宽度
document.body.scrollWidth
滚动宽度

另外要考虑浏览器版本
可以用

<div style="width:2000px;height:1000px;"></div>

测试

cloudgamer 2008-11-15

打赏
举报

我这里也做过一个测试
看scrollWidth，clientWidth，offsetWidth的部分

一把编程的菜刀 2008-11-15

打赏
举报

呵呵，这个expression东西少用为好！！

屡败屡战数马援 2008-11-15

打赏
举报

我看了一下，发现三个方法
document.documentElement.offsetWidth：987
document.body.offsetWidth：967
document.body.scrollWidth：967

比较准确，987的大小就是加上20像素的滚动条大小，真正的可用区域就是967，也就是document.body.offsetWidth
的大小，其结果比较准确。

为了做试验，我使用了一个渐变色的背景图片，其宽度为689px，将其放在一个宽689px的div1中做背景图像，然后在它的并排位置放置一个div2，其背景使用的是背景色，使用上面的document.body.offsetWidth方法正好填充满整个窗口。

html代码使用的是xHtml 1.0 的transitional模式。

我使用的是IE8浏览器，IE8浏览器拥有一个客户端调试器，按F12键就会出现，调试器中可以强制选择使用的显示模式，
如果使用Quirks模式显示（这个模式就是IE6模式），显示正常，使用IE7浏览器模式，同样显示正常，但使用IE8的标准模式出现了问题，其宽度代码设置失败。
其div2的宽度代码我使用的是css中的expression扩展，它在expression后面的括号里面可以调用js代码，我怀疑ie8标准不支持这个扩展，但IE8的兼容模式正常显示。

一把编程的菜刀 2008-11-15