jquery not able to read the value of my css attribute

Question

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?

have you tried using attr?

SAK
– SAK

2014-12-13 19:51:28 +00:00
Commented Dec 13, 2014 at 19:51 — SAK
– SAK, Commented Dec 13, 2014 at 19:51

A.B · Accepted Answer · 2014-12-13 20:05:34Z

3

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"))

edited Dec 13, 2014 at 20:05

answered Dec 13, 2014 at 19:52

A.B

20.5k3 gold badges43 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Marko Gresak Over a year ago

Out of curiosity, do you happen to know why .css("padding") works in chrome, but not in ff?

A.B Over a year ago

In chrome it will give 50px, but dont know wwhy is this a difference

Marco Dinatsoli Over a year ago

when I use your solution, the first log works correctly, while the second log gives me 30px10

Marko Gresak Over a year ago

"30px" + 10 = "30px10", simple string concatenation. What you have to do is parse the padding value to int and then add the values.

A.B Over a year ago

@MarcoDinatsoli see edited answer, you need to parse it into int also

|

Niranjan Borawake · Accepted Answer · 2014-12-13 20:00:59Z

1

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

answered Dec 13, 2014 at 20:00

Niranjan Borawake

1,63813 silver badges20 bronze badges

3 Comments

Marko Gresak Over a year ago

This doesn't work in ff.Check @A.B's answer to see the root of OP's problem.

Niranjan Borawake Over a year ago

ohh u mean to say using individual properties padding-top..... K. Using parseInt is what i wanted to say.. thanks.

Marco Dinatsoli Over a year ago

pluss onee for the parsing issue

charlietfl · Accepted Answer · 2014-12-13 19:57:46Z

0

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

answered Dec 13, 2014 at 19:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

jquery not able to read the value of my css attribute

my problem

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

my problem

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related