CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10570

jquery not able to read the value of my css attribute

this is my css 

 table.table tr td{
        padding:30px;
        border-left: double 1px white;
        border-bottom: double 1px white;
        cursor:cell;
    }

and this is my jquery code:

$(document).ready(function () {

    $("#zoomIn").on('click', function () {
        var previousValue = $(".table tr td").css("padding");
        console.log(previousValue);
        previousValue = previousValue + 10;
        console.log(previousValue);
        $(".table tr td").css('padding', previousValue);
    });
})

as you see, i log the value before adding 10 and after adding 10

my problem

the first log gives me an empty string in firefox firebug. However, it should have given me 30

what have i missed please?

Upvotes: 0

Views: 45

Answers (3)

A.B
A.B

Reputation: 20445

You will be getting padding like this "" (empty string) so you will be adding 10 in it , not in 50

use these individual padding or if all are same you can take one of it

Note: In chrome .css("padding") will return 50px but in firefox it will return empty string while individual property will work on both

 top_padding =  $("body").css("padding-top");
 bottom_padding =  $("body").css("padding-bottom");
 left_padding =  $("body").css("padding-left");
 right_padding =  $("body").css("padding-right");

you will also need to parse padding

    parseInt($("body").css("padding-bottom"))

Upvotes: 3

Niranjan Borawake
Niranjan Borawake

Reputation: 1638

Make sure you are using parseInt before adding to previousValue.

$("#zoomIn").on('click', function () {
    var previousValue = $(".table tr td").css("padding");
    console.log(previousValue);
    previousValue = parseInt(previousValue) + 10;
    console.log(previousValue);
    $(".table tr td").css('padding', previousValue + 'px');
});

JSFIDDLE DEMO

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

When you set padding with css it actually gets parsed to 4 properties by browser padding-left, padding-top, padding-right & padding-bottom

In order to get the padding values you have to use those 4 sides. You won't get a return value for the top level padding

Upvotes: 0

Related Questions