You can only read a style property of an element if it is set inline.
<div id="div_1" style="padding:1em 1em 1em 1em">
or in a script-
document.getElementById('div_1').style.padding= '1em 1em 1em 1em'
You can access the css inheritance chain,
but it requires a crossbrowser method :
- document.deepCss= function(who, css){
-
var val= '', str= '';
-
if(!who || who.style== undefined) return '';
-
if(/\-/.test(css)){
-
str= css.replace(/\-[a-z]/g, function(w){
-
return w.charAt(1).toUpperCase() + w.substring(2);
-
})
-
}
-
val= who.style[str];
-
if(!val){
-
if(who.currentStyle) val= who.currentStyle[str];
-
else{
-
var dv= document.defaultView || window;
-
if(dv && dv.getComputedStyle){
-
str= str.dasher(true);
-
val= dv.getComputedStyle(who,'').getPropertyValue(css);
-
}
-
}
-
}
-
return (val)? val: '';
-
}
-
Pass the method an element reference and a css property value-
Shortcut families(font,background,margin,border,padding) can return odd values, it's best to get a specific value(padding-top)
var who=document.getElementById('div_1')
alert(document.deepCss(who,'padding-top'));