为啥div DOM对象没有高度和宽度属性[重复]
Posted
技术标签:
【中文标题】为啥div DOM对象没有高度和宽度属性[重复]【英文标题】：Why div DOM object does not have height and width properties [duplicate]为什么div DOM对象没有高度和宽度属性[重复] 【发布时间】：2018-10-08 05:52:56 【问题描述】：我是初学者。这可能很简单，但我试图找到答案并没有成功。我的问题是，为什么 div 对象的 width 和 height 属性返回 undefined 而它们显然都是 100px？
In this topic 解释了如何获取.offsetWidth 属性。但据我了解，它与.width 并非 100% 相同。
window.onload = function()
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e)
var elementID = e.target.id;
var element = document.getElementById(elementID);
var width = element.width;
console.log(element);
console.log(width);
div#test
position: absolute;
height: 100px;
width: 100px;
background-color: black;
<div id="test"></div>我的回答
谢谢大家的回答。他们促使我找到自己的简单解决方案，希望对像我这样的初学者有所帮助。答案是：div DOM 对象没有 .width 和 .height 属性，即使您在 CSS 中分配它们并且它们运行良好。为此，它分别具有.style.width 和.style.height。但即使您通过 CSS 分配它们，它们也不会出现在 element.style 中，除非您有目的地使用 Java Script 进行分配。因此，要通过 JS 获取 div 元素的 width 或 height，首先从 CSS 中删除这些属性。您将不再需要它们。然后通过element.style.width命令分配width，然后您可以随时使用element.style.width轻松获取它。
CSS
div
position: absolute;
background-color: black;
JavaScript
window.onload = function()
var test = document.getElementById("test");
test.addEventListener("click", select);
test.style.width = "100px";
test.style.height = "100px";
function select(e)
var elementID = e.target.id;
var element = document.getElementById(elementID);
var width = element.style.width;
console.log(element);
console.log(width);
【问题讨论】：
element.style.width
您需要使用计算样式来获取样式定义的宽度
黑胡子，我添加了第二个欺骗链接，它可能显示您正在寻找的内容
@TemaniAfif 如果关闭它，请确保引用正确的答案。在这种情况下，正如我猜你在评论中的意思，很可能getComputedStyle OP 要求...我刚刚添加到欺骗链接中
@LGSon 好吧，我的评论是针对 tyr 添加的评论 :) ...他得到了投票，但这是错误的，因为我们需要计算样式来获得 CSS 定义的样式 ...而那个 dup 是已经建议了，当我看到它时，我发现它对他的需求有好处
【参考方案1】：
使用offsetWidth 和offsetHeight
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e)
var elementID = e.target.id;
var element = document.getElementById(elementID);
var offsetWidth = element.offsetWidth;
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
console.log('element', element);
console.log('offsetWidth', offsetWidth);
console.log('width', width);
console.log('height', height);
div#test
position: absolute;
height: 100px;
width: 100px;
background-color: black;
<!doctype html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<body>
<div id="test"></div>
</body>
</html>【讨论】：
offsetWidth 与 CSS 中的 width 相同。我的意思不仅在我的情况下，而且在一般情况下
阅读***.com/questions/8133146/…@BlackBeard
正如我所料，它不是 100% 一样的。我只需要简单的width。有没有可能通过 JS 搞定？
我改了代码，检查一下@BlackBeard【参考方案2】：
我认为你需要clientWidth 和clientHeight。
【讨论】：
以上是关于为啥div DOM对象没有高度和宽度属性[重复]的主要内容，如果未能解决你的问题，请参考以下文章