JS中的宽度

现实世间里，一个物体的宽度是明确的、没有异议的，而在JS的世界里，却有好几种获取div宽度的方法，有时这些方法获取的结果是一致的，有时确不尽相同，这一度让我很困惑。

为了理解width，我们创建一个宽200、高100的div来辅助学习：

首先我先给上结论，之后我会用例子验证结论的正确性：

其中，clientWidth和offsetWidth是原生dom对象的属性，其余的是jQuery对象的方法。

那么下面我们开始验证结论的正确性，此时内容宽度是200px，padding和border都是0px。

因此：

再用浏览器开发者工具(F12)的console验证，此时结论正确：

接着，我们给div加上左右padding(左右padding分别设为20px和30px)：

如果你们跟着写这个demo进行验证，可以发现，在浏览器中，这个div变宽了，那是因为此时用css设定的宽度200是针对内容的，而div的可视区域包括padding和border，因此padding变大了，div也就变大了。

我们接着算现在各种方式的宽度：

验证：

我们再给div加上左右border(左右边框分别设为10px和15px)：

计算宽度：

验证：

最后，我们给div加上左右margin(左右margin分别设为16px和32px)：

计算宽度：

验证：

至此幸不辱命，结论悉数验证通过(验证使用的是谷歌核心的浏览器)，不过还有一点要说明一下：

上面我们说过，css设定的宽度200是针对内容的，其实当我们给div加上样式 box-sizing:border-box 的时候， width:200px 的作用范围就变成也包括border和padding，我们再来验证一下上面最后的那个例子，首先计算宽度：

验证：

此种情况下，结论依然正确，希望至此大家已经理解各种获取div宽度的属性和方法。

你可以用documentbodyscrollWidth 来获取，但兼容性本人没有做过测试。 给你个参考：网页可见区域宽：documentbodyclientWidth

网页可见区域高：documentbodyclientHeight

网页可见区域宽：documentbodyoffsetWidth(包括边线的宽)

网页可见区域高：documentbodyoffsetHeight(包括边线的宽)

网页正文全文宽：documentbodyscrollWidth

网页正文全文高：documentbodyscrollHeight

网页被卷去的高：documentbodyscrollTop(IE7无效)

网页被卷去的左：documentbodyscrollLeft(IE7无效)网页被卷去的高：documentdocumentElementscrollTop(IE7有效)网页被卷去的左：documentdocumentElementscrollLeft(IE7有效)

网页正文部分上：windowscreenTop

网页正文部分左：windowscreenLeft

屏幕分辨率的高：windowscreenheight

屏幕分辨率的宽：windowscreenwidth

屏幕可用工作区高度：windowscreenavailHeight

屏幕可用工作区宽度：windowscreenavailWidth 相对于窗口左上角的X：windoweventclientX相对于窗口左上角的Y：windoweventclientY

相对于整个页面的X：windoweventX

相对于整个页面的Y：windoweventY

原生JS获取DIV的属性有两种方法

currentStyle和getComputedStyle，前者是兼容IE端的，后者也兼容W3C，两者内核不同，所以就有两种兼容的写法

如果只是单独的获取某个属性值可以这样写

objcurrentStyle[属性名];这种不兼容-webkit-内核的，

所以一般是封装成一个函数可以到处调用，而且不止针对某个属性值

function getStyle(obj,styleName){

if(objcurrentStyle){

return objcurrentStyle[styleName];

}else{

return getComputedStyle(obj,null)[styleName];

}

}

上面是封装好一个函数，可以直接调用

而目前的JQ库就不需要这么麻烦，可以直接

OBJCSS(属性名); 这样子就可以直接获取

strInfo+=\r\n网页可见区域高:+documentbodyclientHeight;

strInfo+=\r\n网页可见区域宽:+documentbodyoffsetWidth+(包括边线的宽);

strInfo+=\r\n网页可见区域高:+documentbodyoffsetHeight+(包括边线的高);

strInfo+=\r\n网页正文全文宽:+documentbodyscrollWidth;

strInfo+=\r\n网页正文全文高:+documentbodyscrollHeight;

strInfo+=\r\n网页被卷去的高:+documentbodyscrollTop;

strInfo+=\r\n网页被卷去的左:+documentbodyscrollLeft;

strInfo+=\r\n网页正文部分上:+windowscreenTop;

strInfo+=\r\n网页正文部分左:+windowscreenLeft;

strInfo+=\r\n屏幕分辨率的高:+windowscreenheight;

strInfo+=\r\n屏幕分辨率的宽:+windowscreenwidth;

strInfo+=\r\n屏幕可用工作区高度:+windowscreenavailHeight;

strInfo+=\r\n屏幕可用工作区宽度:+windowscreenavailWidth;

windowconfirm(strInfo);

</script

-----------------------------------------------------------------------------------------

最近编程中发现html静态页面的开发可以使用

documentbodyClientHeight

来获得页面的高度，但aspnet的页面却无法这样获取，获取到的只是页面最小的高度，比如页面只有一个button，那么该js语句获得的就是24。

documentdocumentElementOffsetHeight

----------------------------------------------------------------------------------------加上documentbodyscrollLeft;

documentbodyscrollTop;

x=documentbodyclientWidth+documentbodyscrollLeft;

y=documentbodyclientHeight+documentbodyscrollTop;若想得到整个页面的高度可以用

以上就是关于JS中的宽度全部的内容，包括:JS中的宽度、JS获取页面内容宽度各浏览器不一、js怎么得到div宽度呢等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！