Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The <a href="https://developer.mozilla.org/En/DOM/element.style" rel="noreferrer"><code>element.style</code></a> property lets you know only the CSS properties that were defined as <em>inline</em> in that element (programmatically, or defined in the style attribute of the element), you should get the <em>computed style</em>.</p> <p>Is not so easy to do it in a cross-browser way, IE has its own way, through the <code>element.currentStyle</code> property, and the DOM Level 2 <em>standard</em> way, implemented by other browsers is through the <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle" rel="noreferrer"><code>document.defaultView.getComputedStyle</code></a> method.</p> <p>The two ways have differences, for example, the IE <a href="http://msdn.microsoft.com/en-us/library/ms535231(VS.85).aspx" rel="noreferrer"><code>element.currentStyle</code></a> property expect that you access the CCS property names composed of two or more words in <em>camelCase</em> (e.g. <code>maxHeight</code>, <code>fontSize</code>, <code>backgroundColor</code>, etc), the standard way expects the properties with the words separated with dashes (e.g. <code>max-height</code>, <code>font-size</code>, <code>background-color</code>, etc).</p> <p>Also, the IE <code>element.currentStyle</code> will return all the sizes in the unit that they were specified, (e.g. 12pt, 50%, 5em), the standard way will compute the actual size in pixels always.</p> <p>I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way:</p> <pre><code>function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView &amp;&amp; defaultView.getComputedStyle) { // sanitize property name to css notation // (hypen separated words eg. font-Size) styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // sanitize property name to camelCase styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // convert other units to pixels on IE if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return (function(value) { var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft + "px"; el.style.left = oldLeft; el.runtimeStyle.left = oldRsLeft; return value; })(value); } return value; } } </code></pre> <p>The above function is not perfect for some cases, for example for colors, the standard method will return colors in the <em>rgb(...)</em> notation, on IE they will return them as they were defined.</p> <p>I'm currently working on an article in the subject, you can follow the changes I make to this function <a href="http://gist.github.com/369133" rel="noreferrer">here</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload