get div padding - Javascript / DHTML / Ajax Forum

Hi

I have a HTML div element that has CSS padding applied to it.

I am trying to retrieve the top and bottom padding values that are on this div.

I have tried the following JavaScript code to try to get the top padding, but it does not seem to work. (Also this code does not produce any errors.)

Expand|Select|Wrap|Line Numbers

	var content_pTop = document.getElementById('my_div').style.paddingTop  ;

alert (content_pTop);

does anyone know what i am doing wrong, or know of a way to get the padding values of any given div.

thanks,

mrhoo

Needs Regular Fix

408 Posts

May 15th, 2008
01:04 PM
#2

Re: get div padding

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 :

Expand|Select|Wrap|Line Numbers

	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'));