Obtaining HTML Element's Style Values in JavaScript To retrieve style information from an HTML element that has been styled using the tag without using libraries, you can access the computed style rather than the inline style.</p> <p><strong>Cross-Browser Compatibility</strong></p> <p>IE uses the element.currentStyle property, while other browsers implement the DOM Level 2 document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp) method. To handle this difference, a cross-browser function is provided:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // Sanitize property name to CSS notation (e.g., font-Size) styleProp = styleProp.replace(/([A-Z])/g, "-").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; } }</pre><div class="contentsignin">Copy after login</div></div> <p><strong>Example Usage for Your Code Snippet</strong></p> <p>To obtain the width value in the provided code snippet, use the following:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var boxWidth = getStyle(document.getElementById("box"), "width");</pre><div class="contentsignin">Copy after login</div></div>
