Geek Answers Handbook

Get calculated width in pixels in Opera

How can I get the calculated element width 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 is just work on Opera. It returns “auto” for many things instead of the useful pixel value.

Here's a live demo that expands the text to fit in the box. It does not work in Opera, because the calculated width is autoinstead of the value px, as in other browsers.

live demo in different browsers

How can I get more useful computed styles, such as the pixel width of an element, in Opera?

I understand that in this case I can use offsetWidthinstead 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 calculated styles in Opera, where the style is actually calculated in units. I am not interested offsetWidthfor the purposes of this question.

+5
source share
4 answers

It also fails in IE <= 8

The reason for that currentStyleand getComputedStylework differently in this case. If you tested getComputedStyle, it first worked in Opera and IE 9-10. Opera in many cases tries to simulate IE (see ), so it has one too. innerText vs textContentcurrentStyle

, "" , display:inline (FF, Chrome, IE), ""... ... , Opera, "" px .

, , (, , , ). , .

. , clientWidth, offsetWidth scrollWidth . , , border, margin / ( ).

, IE 6, MS ( , innerHTML).

MSDN MDN.

+2

, CSS " ", , . , Opera T , , .

element.offsetWidth getComputedStyle() .

+4

, , , script 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>
0

, Opera:

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

More articles:


All Articles