如何找到<div>的当前宽度在跨浏览器兼容的方式,而不使用库像jQuery?
当前回答
所有的答案都是正确的,但我仍然想给出一些其他可能有效的选择。
如果你正在寻找指定的宽度(忽略填充,边距等),你可以使用。
getComputedStyle(element).width; //returns value in px like "727.7px"
getComputedStyle允许您访问该元素的所有样式。例如:padding, paddingLeft, margin, border-top-left-radius等等。
其他回答
另一个选项是使用getBoundingClientRect函数。请注意,如果元素的显示为“none”,getBoundingClientRect将返回一个空的rect。
var elem = document.getElementById("myDiv");
if(elem) {
var rect = elem.getBoundingClientRect();
console.log(rect.width);
}
document.getElementById("mydiv").offsetWidth
元素。offsetWidth (MDC)
还可以使用ClassName搜索DOM。例如:
document.getElementsByClassName("myDiv")
这将返回一个数组。如果有你感兴趣的房产。例如:
var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;
divWidth现在等于div数组中第一个元素的宽度。
您可以使用clientWidth或offsetWidth Mozilla开发人员网络引用
就像:
document.getElementById("yourDiv").clientWidth; // returns number, like 728
或与边框宽度:
document.getElementById("yourDiv").offsetWidth; // 728 + borders width
所有的答案都是正确的,但我仍然想给出一些其他可能有效的选择。
如果你正在寻找指定的宽度(忽略填充,边距等),你可以使用。
getComputedStyle(element).width; //returns value in px like "727.7px"
getComputedStyle允许您访问该元素的所有样式。例如:padding, paddingLeft, margin, border-top-left-radius等等。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?