alert(objstylewidth);改成 alert(documentdefaultViewgetComputedStyle(obj,null)['width']);
objstylewidth只能获得用style=‘’标签显示设置的样式，不能获得在样式文件中定义的样式，在火狐、谷歌等浏览器中用documentdefaultViewgetComputedStyle(obj,null)['width']能够获取到样式表中定义的样式，在ie下用的是objcurrentStyle['width']
javascript获取div的class中设置的宽高度：
高度（offsetHeight）：
<head><title>用js获取div的高度</title></head><style type="text/css">
#box{border:1px solid #ff0000;width:200px; }
</style>
<script language="javascript">
function jj(){
var pp=documentgetElementById("box")offsetHeight;
alert(pp);
}
</script>
<body>
<div id="box">
<p>段落内容</p><p>段落内容</p>
<input type="button" onclick="jj();" value="click">
</div>
</body>
宽度（offsetWidth）：
<head><title>用js获取div的高度</title></head><style type="text/css">
#box{border:1px solid #ff0000;width:200px; }
</style>
<script language="javascript">
function jj(){
var pp=documentgetElementById("box")offsetWidth;
alert(pp);
}
</script>
<body>
<div id="box">
<p>段落内容</p><p>段落内容</p>
<input type="button" onclick="jj();" value="click">
</div>
</body>
原生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(属性名); 这样子就可以直接获取
网页可见区域宽或高、网页正文全文宽或高以及网页正文部分左或右，详细请看下文，希望对你有所帮助
具体代码如下：
网页可见区域宽： documentbodyclientWidth网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
代码大致如下供参考：
var image=new Image();imagesrc=//你的背景的src;
var divelement = documentgetElementById(你的div的id);
divelementstyleheight=(imageheightdivelementoffsetWidth)/imagewidth + "px";
几个需要注意的地方是imagesrc=xxx后需要等待直到下载完成。但是如果这个脚本是在你的div已经初始化好之后调用的话，那么已经被下载过了，所以直接进行后面的就好。另外以styleheight来设置高度的话后面需要加单位，比如px
canvaswidth获取的是写在标签属性中的宽度值，eg :<canvas width="800" height="600"></canvas>
这时我们获取的canvas的宽度值是800px;但是如果canvas标签没有设置宽高属性，而是写在css样式表，或者style标签中，canvaswidth获取的是canvas的默认宽（canvas默认宽是300px,默认高是150px）
现实世间里，一个物体的宽度是明确的、没有异议的，而在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宽度的属性和方法。
以上就是关于js获取宽度问width获取空白，已经定义过的全部的内容，包括:js获取宽度问width获取空白，已经定义过的、javascript如何获取div的class中设置的宽高度、js怎么得到div宽度呢等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）