Javascript不返回宽度答案

【问题标题】：Javascript returns no widthJavascript不返回宽度
【发布时间】：2017-06-09 09:17:26
【问题描述】：

我知道这会很尴尬，但我今天是个笨蛋！

为什么 Javascript 不在这里返回宽度？

下面代码的输出是：

JQUERY 说：500；

JAVASCRIPT 说：（这就是问题所在。Javascript 只返回 NOTHING）

这里是 小提琴链接： https://jsfiddle.net/w62zg76f/1/

更新：谢谢你们！ 解决方案当然是 .offsetWidth

（我知道这会很尴尬 :-)

<style>
#divA
{
  width: 500px;
}
</style>

<body>
<div id="divA">I'm a div. Get my width!</div>

<!-- Just for output -->
<p id=result></p>

<script>
$(document).ready(function()
{
  $("#result").html(
  "<br />JQUERY says: " + $("#divA").width() + 
  "<br />JAVASCRIPT says: " + document.getElementById("divA").style.width
  );

});
</script>

【问题讨论】：

由于没有内联样式 width 应用于元素，.style.width 将是未定义的。 How to find the width of a div using raw Javascript? 和 How do I retrieve an HTML element's actual width and height?
也许是时候提一下，如果你分离出你的代码行，构建你的 HTML，然后尝试应用它，你可能会看到实际的错误。
天哪。是的！以及如何在不应用内联样式的情况下获得宽度。我已经尝试过不使用 .style
stackoverflow.com/questions/21064101/…
如果你真的用谷歌搜索它（就像我们大多数给出答案的人一样）你会找到这个问题的 SO 答案

标签： javascript html css

【解决方案1】：

使用offsetWidth

$("#result").html(
"<br />JQUERY says: " + $("#divA").width() + 
"<br />JAVASCRIPT says: " + document.getElementById("divA").offsetWidth;
);

HTMLElement.offsetWidth

【讨论】：

【解决方案2】：

您应该使用.offsetWidth 和.offsetHeight 属性。请注意，它们属于元素，而不是 .style。

"<br />JAVASCRIPT says: " + document.getElementById("divA").offsetWidth;

【讨论】：

【解决方案3】：

改用 document.getElementById("divA").offsetWidth。

【讨论】：

【解决方案4】：

document.getElementById("divA").style.width 返回 undefined，你必须使用 offsetWidth

$(document).ready(function(){

  $("#result").html(
  "<br />JQUERY says: " + $("#divA").width() + 
  "<br />JAVASCRIPT says: " + document.getElementById("divA").offsetWidth
  );

});

#divA{
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">I'm a div. Get my width!</div>




<!-- Just for output -->
<p id=result></p>

【讨论】：