This is the first of a series of blog posts providing Javascript and CSS tips and tricks aimed to help you in your day-to-day work with web user interfaces. Anyone who needs to polish a user interface and make it truly cross-browser has hit the wall of browser differences, bugs and inconsistencies. There are plenty of resources on the Internet discussing workarounds to some of those problems - but our team's front-end developer Martin and I believe that in "our" bag of tricks there are some interesting ones as well. We will try to roll out at least 20 of those in the next couple of months, so... let's see how it goes:

 

 

Here is a crossbrowser JavaScript function for getting CSS property values from DOM elements. The function $style requires the specification of two arguments:

$style(ElementId, CssProperty);

ElementId - the ID of the element from which we will extract CSS property values;
CssProperty - the CSS property we will extract from the element, for example - “background-color”;

The function $style:

function $style(ElementId, CssProperty)
{
    function $(stringId)
    {
        return document.getElementById(stringId);
     }   

    if($(ElementId).currentStyle)
   {
        var convertToCamelCase = CssProperty.replace(/\-(.)/g, function(m, l){return l.toUpperCase()});
        return $(ElementId).currentStyle[convertToCamelCase];
    }
    else if (window.getComputedStyle)
   {
        var elementStyle = window.getComputedStyle($(ElementId), “”);
        return elementStyle.getPropertyValue(CssProperty);
    }
}

Example usage of the function:

1. Register the runtime routine of the $style in the <head>…</head>of your webpage, or as an external script.

2. The CSS for the example:

<style type=”text/css”>
#Div1
{
border: solid 1px red;
background: #00ff00;
color: #000;
font-family: “Trebuchet MS”, Arial, Verdana;
}
</style>

2. The HTML for the example:

<div id=”Div1″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras purus pede, aliquam vel, eleifend in, mollis sit amet, ante.</div>

3. The JavaScript for the example:

<script type=”text/javascript”>
function getElementStyles()
{
    var elBgColor = $style(”Div1″, “background-color”);
    var elForeColor = $style(”Div1″, “color”);
    var elFont = $style(”Div1″, “font-family”);

    alert(’”Div1″ style settings:\n\nbackground color: ‘ + elBgColor + ‘;\n’ + ‘color: ‘ + elForeColor + ‘;\n’ + ‘font-family: ‘ + elFont + ‘;’);
}
</script>

4. And finally, you need an event to fire function. It could be any DOM event. For this example I have used the click event of a button:

<input type=”button” onclick=”getElementStyles()” value=”Get Element Styles” />


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.