在 Opera 中以像素为单位计算宽度答案

【问题标题】：get computed width in pixels in Opera在 Opera 中以像素为单位计算宽度
【发布时间】：2012-02-07 08:25:02
【问题描述】：

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

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

...但这仅适用于 Opera。它为很多事情返回“自动”，而不是有用的像素值。

这是一个live demo，它扩展了一些文本以适合一个框。它不适用于 Opera，因为计算出的宽度是 auto 而不是像其他浏览器中的 px 值。

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

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

【问题讨论】：

为什么不使用任何框架来检测不同浏览器的宽度和高度？ jQuery 使这个例程变得简单而优雅。只需使用 $(glyph).width() insteed getStyle(glyph, 'width') jsbin.com/ikatuc/2/edit#javascript,html,live 在 Opera 10.63、IE6-8、Chrome、Firefox 中测试

标签： javascript css opera styling

【解决方案1】：

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

我建议为此使用element.offsetWidth 而不是getComputedStyle()。

【讨论】：

嗯，我想使用真正的 DOM 方法，但在这里使用非标准的offsetWidth 可能更有意义。您能否提供指向您所说的 Opera 遵循 T 的规范相关部分的链接？如果这真的是指定的行为，我很惊讶他们是唯一这样做的人。
警告：我不是 CSS 大师。但是，我对此的理解是 CSS 中的“计算”值和“实际”值之间存在区别（有关定义，请参见 w3.org/TR/CSS2/cascade.html），其中“计算”可能并不总是实际上是像素值。现在，这可能没有详细说明，无法让我准确地声称 Opera 做得“正确”——假设我们做了我们认为在实施时完全正确的事情，但其他浏览器似乎正在发布其他决定.. ;)
我看到developer.mozilla.org/en/CSS/computed_value 声明：“getComputedStyle DOM API 返回使用的值，而不是计算的值。”。好吧，这就解释了：-p
天哪，这令人困惑。规范说getComputedStyle method provides a read only access to the computed values of an element，但在任何地方都没有提到“使用值”。现在我很好奇其他浏览器如何证明他们的行为是合理的。
但是等等，它说here“另一方面，相对值必须转换为计算值......必须计算'auto'值”......听起来不是像歌剧给出的这些“自动”值应该转换为单位吗？

【解决方案2】：

它在 IE 中也失败了

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

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

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

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

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

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

【讨论】：

计算风格对我来说在除 Opera 之外的所有其他浏览器中都很有用。这个问题是关于如何在 Opera 中获得有用的计算样式，而不是如何使用 clientWidth 解决它。如果我更改示例以获取字体颜色或其他内容会有所帮助吗？
好的，我刚刚回答了你的问题（根据你的标题和原始描述）。如果您有特定的问题，为什么还要问其他问题？我不确定您是尝试解决问题还是只想创建一个...
我有一个具体的问题。我原来的帖子以“如何在 Opera 中获得更有用的计算样式，例如元素的像素宽度？”结尾。这是我的问题的摘要。什么也没有变。我想获得计算样式，而不是 offsetWidth。
当然有一个用例。用例是getStyle 函数，显示在帖子的顶部。除了 Opera，它在每个浏览器中的行为都相同。我希望它在 Opera 中的行为与在其他浏览器中的行为相同。没有什么是模棱两可的。
首先检查getComputedStyle 就像一个魅力。谢谢。

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

【讨论】：

jsbin 一定是把那些脚本元素放在那里了，我只是在脚本面板中输入了它们。 “字形”在这里没有多大意义。在我从中复制粘贴的代码中更有意义。它基本上只是意味着“符号”。在这种情况下，符号是字母 G。

【解决方案4】：

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

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

【讨论】：