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

【问题标题】：Can I easily "set" an element's offsetWidth?我可以轻松“设置”元素的 offsetWidth 吗？
【发布时间】：2011-06-19 17:16:40
【问题描述】：

注意：我知道 offsetWidth 是只读的

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

但是，我对如何设置我的div 的width 使其offsetWidth 与tr 完全相同。

计算类似于：

div.width = tr.offsetWidth - div.paddingWidth - div.marginWidth

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

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

【问题讨论】：

在我看来您已经回答了自己的问题。我唯一的建议是分别获取 div 计算的左右边距和填充值，因为它们都可能不同。
@Matt Ball：好的，所以我将标题更改为轻松设置宽度。我只是很难相信它没有内置到某个库中（即使它不是 YUI）
另请注意，计算样式等可能会返回像 '40px' 这样的值，这对算术不太有用
您必须通过元素的样式访问边距和填充信息，例如div.style.paddingLeft。请记住它有一个单位，所以如果它不是以像素为单位，那么你就不走运了。如果是这样，那么您必须首先解析数字部分才能使您的计算正常工作，这就是为什么我更喜欢按照我的回答中所述将所有内容都归零的原因。（您也许可以通过window.getComputedStyle 方法获得一些更好的标准化边距和填充信息，但我不知道浏览器是否支持它。）

【解决方案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)。

您可以通过从

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

【讨论】：

【解决方案2】：

这有点乱，我可能会因为建议它而被否决，但是您可以在不弄乱边距或填充的情况下做到这一点的一种方法是将 div 的宽度设置为已知值，然后找出它与 div 之间的差异偏移宽度。这应该告诉您将宽度设置为什么以使其适合。

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

确实很乱，但你不必关心这种方式的内边距、边距或边框。

【讨论】：