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” />
This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.
[...] Controlar a CSS Opacity Taxa do Criança Elementos em Transparente Pais no Internet Explorer 07. $ Estilo – Get Any CSS Propriedade Valor de um Objeto 08. Emulando border-color: transparente no Internet Explorer 6 09. Um Exotic CSS Hack para o [...]
[...] Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer 07. $style – Get Any CSS Property Value of an Object 08. Emulating border-color: transparent in Internet Explorer 6 09. An Exotic CSS Hack for [...]