在 Opera 中获取以像素为单位的计算宽度
如何获得 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 。
How can I get the computed width of an element in Opera? In other browsers I can do this:
// getComputedStyle wrapper
function getStyle(element, styleProp) {
return element.currentStyle ? element.currentStyle[styleProp] :
getComputedStyle(element, null).getPropertyValue(styleProp);
}
...but this only sort of works on Opera. It returns "auto" for a lot of things instead of a useful pixel value.
Here's a live demo that expands some text to fit in a box. It doesn't work on Opera, because the computed width is auto instead of a px value as in other browsers.
How can I get more useful computed styles, such as the pixel width of an element, in Opera?
I realize that I can, in this case, use offsetWidth instead of getting the computed style. I appreciate the advice, but the real point of this question is that I want to know how to get computed styles in Opera where the style is actually computed in units. I don't care about offsetWidth for the purposes of this question.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
CSS 所谓的“计算值”并不总是您所期望的。我猜 Opera 遵循了 T 的规范，而其他浏览器则做了一些他们认为更有用的事情。
为此，我建议使用
element.offsetWidth而不是getCompulatedStyle()。What CSS calls "computed value" isn't always what you expect. I guess Opera follows the spec to the T here while the other browsers do something they consider more useful.
I'd suggest using
element.offsetWidthinstead ofgetComputedStyle()for this purpose.它在 IE <= 8 中也会失败，
原因是在这种情况下
currentStyle和getCompulatedStyle的工作方式不同。如果您首先测试getCompulatedStyle，它将工作 在 Opera 和 IE 9-10 中均有效。 Opera 在很多情况下尝试模仿 IE（请参阅innerText 与 textContent），因此它也有currentStyle。但请注意，如果相关元素具有
，您将失去“预期”行为display:inline以其风格（FF、Chrome、IE），因为它们会为你报告“auto”...除了...你猜对了，在 Opera 中，它会向你显示“正确”px宽度的元素。如果您想要一个通用用途的函数，您最好包含一个通用用途库（您会发现其中充满了您永远不需要的边缘情况）。如果您有特定目的要解决，您可以使用兼容的替代品。
在这种情况下，计算样式对您来说并不是真正有用。根据您的需要，您需要的可能是
clientWidth、offsetWidth或scrollWidth。它们的主要区别在于您是否要包含内边距、边框、边距和/或剪切区域（以防水平溢出内容）。它们甚至在像 IE 6 这样的古老浏览器上也受到支持，事实上这些属性是 MS 在第一次浏览器战争中首次引入的（就像
innerHTML一样）。您可以通过使用 MSDN 或 MDN 进行谷歌搜索来了解有关它们的更多信息。
It also fails in IE <= 8
The reason is because
currentStyleandgetComputedStylework differently in this case. If you were testing forgetComputedStylefirst it would work in both Opera and IE 9-10. Opera tries to mimic IE in a lot of cases (seeinnerText vs textContent), so it hascurrentStyletoo.BUT please note that you lose your "expected" behavior if the element in question has
display:inlinein it's style (FF, Chrome, IE), because they will report "auto" for you... except... you guessed it, in Opera which will then show you the "correct"pxwidth of the element.If you want a general purpose function you better off including a general purpose library (which as you will find are filled with edge cases you will never need). If you have a specific purpose to solve you can use a compatible replacement.
Computed style isn't really useful for you in this case. What you need is probably
clientWidth,offsetWidthorscrollWidthdepending on your needs. They differ mainly in whether you want to include padding,border,marginand/or clipped areas (in case of horizontally overflowing content).They are supported even on ancient browsers like IE 6, in fact these properties were first introduced by MS back in the first browser war (just like
innerHTML).You can read more about them by googling with MSDN or MDN.
如果您保持代码结构良好，那么这就不应该是困难的，永远不要将 script 元素作为 body 元素的子元素，即使它经过验证，因为这会导致非常糟糕的编码实践。另一方面，我推荐您使用appendChild而不是不可靠的innerHTML，所以至少您正在努力不采取懒惰的路线。
对 onload 事件使用匿名函数，这样您显然可以执行多个函数。我不熟悉字形（SVG？），所以我无法让任何浏览器以 7px 以外的任何位置渲染字形。
这是修改后的代码...
There shouldn't be any reason this has to be difficult if you keep your code well structured, never put script elements as children to the body element even if it validates as it will lead to very poor coding practices. On the other hand I commend you for using appendChild instead of the unreliable innerHTML so at least you're making an effort to not take the lazy route.
Use an anonymous function for the onload event so you can execute more than one function obviously. I'm not familiar with glyphs (SVG?) so I was not able to get any browser to render the glyph at anything other than 7px.
Here is the reworked code...
您可以使用以下代码来获取 Opera 中的属性：
You can use this code to get the property in Opera: