Question

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

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

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

这是一个live demo，可以扩展一些文字以适应框。它在Opera上不起作用，因为计算出的宽度为auto而不是px值，与其他浏览器一样。

live demo in different browsers

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

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

Answer 1

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

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

Answer 2

它在IE＆lt; = 8

中也失败了

原因是因为currentStyle和getComputedStyle在这种情况下工作不同。如果您首先测试的是getComputedStyle，那么在Opera和IE 9-10中都会 work 。 Opera尝试在很多情况下模仿IE（参见innerText vs textContent），因此它也有currentStyle。

但请注意，你失去了预期的＆＃34;如果相关元素在其风格中具有display:inline（FF，Chrome，IE），则会出现这种情况，因为他们会报告＆＃34; auto＆＃34;对你来说......除了......你猜对了，在Opera中它会告诉你＆＃34;正确的＆＃34; px元素的宽度。

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

在这种情况下，计算样式对您来说并不实用。您需要的可能是clientWidth，offsetWidth或scrollWidth，具体取决于您的需求。它们的不同之处主要在于您是否要包括填充，border，margin和/或剪切区域（如果内容水平溢出）。

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

您可以通过Google搜索MSDN或MDN来了解有关它们的更多信息。

Answer 3

如果你保持代码结构良好，不应该有任何理由这样做，不要将脚本元素作为子元素放在body元素中，即使它已经验证，因为它会导致非常糟糕的编码实践。另一方面，我赞扬你使用appendChild而不是不可靠的innerHTML，所以至少你要努力不采取懒惰的路线。

对onload事件使用匿名函数，这样可以显然执行多个函数。我不熟悉字形（SVG？）所以我无法让任何浏览器在7px以外的任何地方渲染字形。

以下是重写代码......

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>get computed width in pixels in Opera</title>
<script type="application/javascript">
//<![CDATA[

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

// cheesy convenience function
function textDiv(textContent, className)
{
 var tmp = document.createElement('div');
 if (className) tmp.className = className;
 tmp.appendChild(document.createTextNode(textContent));
 return tmp;
}

window.onload = function()
{
 var box = document.getElementById('box'),glyph = box.appendChild(textDiv('g', 'glyph')),size=500;

 glyph.style.position = 'absolute';
/*
 document.getElementById('status').appendChild(textDiv('Initial computed width: ' + getStyle(glyph, 'width')));

 while (parseInt(getStyle(glyph, 'width'), 10) <  100)
 {
  glyph.style.fontSize = size++ + '%';
 }
*/
 document.getElementById('status').appendChild(document.createTextNode(document.getElementById('box').firstChild.scrollWidth+'px'));
}

//]]>
</script>
</head>

<body>

<div id="status"></div>
<div id="box"></div>

</body>
</html>

Answer 4

您可以使用此代码获取Opera中的属性：

document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp);

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

4 个答案: