Question

我知道这听起来很简单，但这就是我得到的那些不起作用。

<style type="text/css">#graphelement{width:800px;height:300px;}</style>
<div id="graphlabel2">Right Axis Label</div>
<div id="graphelement"></div>

<script type="text/javascript">
var graphwidth = document.getElementById('graphelement').style.width;
document.getElementById('graphlabel2').style.width = graphwidth;
</script>

我的问题是'graphwidth'总是空着。如果我只是抓住元素的宽度（element.width），我在'graphwidth中得到'undefined'。上面的所有代码都在body标签内，甚至是初始样式标签。

这是一个更大的脚本的一部分，但是如果我可以从元素中获取宽度并将其设置为另一个，我可以计算出其余部分。我的总体目标：我有一个元素，其宽度设置为内联样式。如果在手持设备上查看页面（即屏幕宽度小于图形宽度），那么我想将元素和相关元素的宽度设置为screen.width。我似乎无法检索和设置element.style.width。

Answer 1

元素上的

style.width为空，除非您通过javascript分配它。相反，你想要的是computedStyle。这是一些documentation。

window.getComputedStyle(document.getElementById('graphelement').width)。

请注意，旧版本的IE使用currentStyle。（看来只有IE9 +支持getComputedStyle） document.getElementById('graphelement').currentStyle.width

这是一个jsFiddle演示如何支持两者。

Answer 2

我认为您需要使用window.getComputedStyle()

var gLabel = document.getElementById("graphelement");
var style = window.getComputedStyle(gLabel , null);

document.getElementById('graphlabel2').style.width = style.getPropertyValue("height");

Answer 3

使用document.getElementById，您无法获取css值，只能设置它们。

我认为this正是您所寻找的。

Answer 4

.style属性用于获取直接放置的样式元素。它不会从样式表中计算样式。

请参阅： why javascript this.style[property] return an empty string?

如何从一个元素到另一个元素的复制样式宽度

4 个答案: