我可以轻松地“设置”元素的offsetWidth吗？

Question

注意：我知道offsetWidth是只读的

我正在尝试将弹出式“div”覆盖为tr元素，并使其具有完全相同的宽度。

但是，我对如何设置div的{​​{1}}以使其width与offsetWidth完全相同感到难过。

计算结果如下：

tr

但肯定有更好的方法（因为我只能考虑以两个为一组获得填充和边距偏移......）

具体来说，如果可能的话，我想要YUI 2的答案。

Answer 1

如果您将div的边距和填充清零，那么以下内容应该有效：

YAHOO.util.Dom.setStyle(div, 'width', tr.offsetWidth + 'px');

根据您在div和tr上处理边框的方式，您可能需要指定tr.clientWidth。

然后，您可以根据div的父/子元素的要求设置任何边距/填充，以获得所需的外观。

计算出你想要做的事情的关键是准确理解clientWidth and offsetWidth measure是什么，并且元素的CSS width是其内容区域并排除任何边距，边框和填充在其上定义（see the W3C box model here）。

您可以通过从

查询填充等在计算中包含填充等

Answer 2

它有点乱，我可能会因为建议它而被投票，但是你可以在没有弄乱你的边距或填充的情况下做到这一点的方法是将div的宽度设置为已知值，然后找到它与div之间的差异offsetWidth。这应该告诉你如何设置宽度以使其适合。

div.style.width = '20px'
diff = div.offsetWidth - 20;
div.style.width = tr.offsetWidth - diff;

这真的很乱，但你不必这么关心填充，边距或边框。