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

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演示如何支持两者。