I have a CSS defined for a div

#myDiv
{
  padding-top: 20px,
  padding-bottom: 30px
}

In a JS function, I would like to increment the value of padding-top by 10px

function DoStuff()
{
  var myDiv = document.getElementById('myDiv');
  //Increment by 10px. Which property to use and how? something like..
  //myDiv.style.paddingTop += 10px;
}

I have a CSS defined for a div

#myDiv
{
  padding-top: 20px,
  padding-bottom: 30px
}

In a JS function, I would like to increment the value of padding-top by 10px

function DoStuff()
{
  var myDiv = document.getElementById('myDiv');
  //Increment by 10px. Which property to use and how? something like..
  //myDiv.style.paddingTop += 10px;
}

• javascript
• css

2 Answers 2

The .style property can only read inline styles defined on an element. It cannot read styles defined in stylesheets.

You need a library to get the value, or use something like (from this question):

function getStyle(elem, name) {
    // J/S Pro Techniques p136
    if (elem.style[name]) {
        return elem.style[name];
    } else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    } else {
        return null;
    }
}

Then your code bees:

var element = document.getElementById('myDiv'),
    padding = getStyle(element, 'paddingTop'); // eg "10px"

element.style.paddingTop = parseInt(padding, 10) + 10 + 'px';

References:

• .style and inline vs stylesheet styles
• getStyle function
• radix (2nd) parameter to parseInt

You should be using jquery to do this sort of thing, as most other solutions won't be very cross browser patible and you'll spend days pulling your hair out over it.

function Dostuff()
{
    var currentPadding =  $('#myDiv').css('padding-top');
    $('#myDiv').css('padding-top', currentPadding + 1);
}

See jquery. for more.