在没有jquery的情况下获取div内容宽度

Question

我有以下元素

<div id='mydiv' style='width: 0px; overflow: hidden; white-space: nowrap;'>
    Lots of content
</div>

我正在使用jQuery来滑动打开像这样的内容

$("#mydiv").animate({width:this[0].scrollWidth},{duration:200});

但是我正在努力减少对jQuery的依赖，我想用css转换来做这个，所以css会是：

#mydiv { transition: width 200ms ease-in-out; }

javascript将是：

document.getElementById("mydiv").style.width = ???

如何在没有jQuery的情况下找到元素内容的宽度？

Answer 1

这是

if(var el = document.getElementById("mydiv"))
  el.style.width = el.scrollWidth + "px";

你在寻找什么？

Answer 2

设置宽度，写

var x = 5; 
document.getElementById("mydiv").style.width = x + "px";

得到它的宽度，写

var x = document.getElementById("mydiv").style.width; 

请注意使用x + "px"自动转换为字符串。

Answer 3

您可以使用以下方法获取元素的宽度（即内容+填充+边框）：

ViewState["DynamicControl1"] = true;

也许在Mozilla开发者网络上看看“shinyjs”。

Answer 4

这是更简单，更直接的单行代码：

var width = document.getElementById('mydiv').offsetWidth;