javascript - get computed width in pixels in Opera - Stack Overflow

admin管理员组

文章数量:1331091

How can I get the puted 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 puted width is auto instead of a px value as in other browsers.

How can I get more useful puted 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 puted style. I appreciate the advice, but the real point of this question is that I want to know how to get puted styles in Opera where the style is actually puted in units. I don't care about offsetWidth for the purposes of this question.

How can I get the puted 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 puted width is auto instead of a px value as in other browsers.

How can I get more useful puted 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 puted style. I appreciate the advice, but the real point of this question is that I want to know how to get puted styles in Opera where the style is actually puted in units. I don't care about offsetWidth for the purposes of this question.

• javascript
• css
• opera
• styling

Share Improve this question Follow edited Feb 15, 2012 at 20:40 Dagg Nabbit asked Feb 7, 2012 at 8:25 Dagg NabbitDagg Nabbit 76.8k1919 gold badges114114 silver badges141141 bronze badges 1

• 1 Why dont you use any framework for detecting width and height in different browsers? jQuery made this routine easily and elegantly. Just use $(glyph).width() insteed getStyle(glyph, 'width') jsbin./ikatuc/2/edit#javascript,html,live Tested in Opera 10.63, IE6-8, Chrome, Firefox – Sergey Ratnikov Commented Feb 17, 2012 at 7:01

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5 +100

What CSS calls "puted 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.offsetWidth instead of getComputedStyle() for this purpose.

It also fails in IE <= 8

The reason is because currentStyle and getComputedStyle work differently in this case. If you were testing for getComputedStyle first it would work in both Opera and IE 9-10. Opera tries to mimic IE in a lot of cases (see innerText vs textContent), so it has currentStyle too.

BUT please note that you lose your "expected" behavior if the element in question has display:inline in 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" px width 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 patible replacement.

Computed style isn't really useful for you in this case. What you need is probably clientWidth, offsetWidth or scrollWidth depending on your needs. They differ mainly in whether you want to include padding, border, margin and/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.

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 mend 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...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en">
<head>
<title>get puted 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 puted 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>

You can use this code to get the property in Opera:

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

本文标签： javascriptget computed width in pixels in OperaStack Overflow