js样式属性返回空白

Question

我正在尝试使用JavaScript接收对象的原始CSS宽度值。但是，如果我使用：

var originalWidth = document.getElementById(<idOfObject>).style.width;

它总是返回空白。我还注意到，使用此语法访问的任何属性都将返回空白。我确信给定的元素存在，因为

alert(document.getElementById(<idOfObject>));

确实向我展示了正确的对象。

任何人都可以帮我解决这个问题吗？

Answer 1

您可能尝试获取样式表中设置的值，而不是像这样：

document.getElementById(<idOfObject>).style.width = '100px';

如果要获取元素的宽度，可以使用innerWidth属性：

var width = document.getElementById(<idOfObject>).offsetWidth;

Answer 2

以前的答案都不对。

您要寻找的属性是 clientWidth ，但不是“风格”

document.getElementById('idOfObject').clientWidth;

这将适用于使用外部css设置的“width”，样式seccion甚至内联样式=“width：80px”

一般说明：请勿使用<div width="500">，因为它无效

提到的offsetWidth是第二个最佳选择，但它不会返回css中设置的确切宽度，但宽度加边框宽度

其他选项如innerWidth与窗口对象一起使用对我来说对div不起作用。

这个奇怪的问题是style.width无法正常工作，浪费了2个小时的宝贵时间:-)，希望这个答案可以为将来的其他人缩短时间。

Answer 3

<div  style="width:10%" id="mydiv" >

OR

<div  style="width:10px" id="mydiv" >

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

这对我有用

Answer 4

我试过了，我可以得到值

http://jsfiddle.net/xyd95/

好吧，除非width没有单位

http://jsfiddle.net/xyd95/1/

Answer 5

我相信这会有用

function getWidth()
{

x = document.getElementById(<idOfObject>)
return x.offsetWidth;
}