javascript - jquery 无法读取我的 css 属性的值

Question

这是我的CSS

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

这是我的 jquery 代码:

$(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);
    });
})

如您所见，我记录了添加 10 之前和添加 10

之后的值

我的问题

第一个日志在 firefox firebug 中给了我一个空字符串。但是，它应该给了我 30

请问我错过了什么？

Answer 1

您将得到像这样的填充 ""(空字符串)，因此您将在其中添加 10，而不是 50

使用这些单独的填充，或者如果所有填充都相同，您可以使用其中一个

注意:在 chrome 中，.css("padding") 将返回 50px，但在 firefox 中，它将返回空字符串，而单独的属性对两者都有效

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

你还需要解析填充

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