在Opera中获得以像素为单位的计算宽度

Question

如何在Opera中获得元素的计算宽度？在其他浏览器中,我可以这样做:

// getComputedStyle wrapper
function getStyle(element, styleProp) {
  return element.currentStyle ? element.currentStyle[styleProp] :
      getComputedStyle(element, null).getPropertyValue(styleProp);
}

......但这只适用于Opera.它为很多东西返回"auto"而不是有用的像素值.

这是一个现场演示,可以扩展一些文本以适应盒子.它不适用于Opera,因为计算的宽度auto不是px其他浏览器中的值.

如何在Opera中获得更多有用的计算样式,例如元素的像素宽度？

在这种情况下,我意识到我可以使用offsetWidth而不是获取计算的样式.我很欣赏这个建议,但这个问题的真正意义在于我想知道如何在Opera中获得计算样式,其中样式实际上以单位计算.我不关心offsetWidth这个问题的目的.

Answer 1

CSS所谓的“计算值”并不总是您所期望的。我猜Opera在这里遵循了T的规范，而其他浏览器做了一些他们认为更有用的事情。

我建议使用element.offsetWidth代替getComputedStyle()此目的。

Answer 2

它在 IE <= 8 中也会失败

原因是因为在这种情况下currentStyle和 的getComputedStyle工作方式不同。如果您首先进行测试，getComputedStyle它可以在 Opera 和 IE 9-10 中运行。Opera 在很多情况下都试图模仿 IE（请参阅 参考资料innerText vs textContent），因此它currentStyle也这么做了。

但请注意，如果相关元素具有display:inline其样式（FF、Chrome、IE），您将失去“预期”行为，因为它们会为您报告“自动”...除了...您猜对了，在 Opera 中然后它将显示px元素的“正确”宽度。

如果您想要一个通用函数，您最好包含一个通用库（您会发现其中充满了您永远不需要的边缘情况）。如果您有特定目的要解决，则可以使用兼容的替代品。

在这种情况下，计算样式对您来说并不是真正有用。您可能需要什么clientWidth，offsetWidth或者scrollWidth取决于您的需要。它们的主要区别在于您是否要包含填充、border和margin/或剪切区域（以防水平溢出内容）。

即使像 IE 6 这样的古老浏览器也支持它们，事实上这些属性是 MS 在第一次浏览器战争中首次引入的（就像innerHTML）。

您可以通过使用 MSDN 或 MDN 进行谷歌搜索来了解有关它们的更多信息。