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中给了我an empty string。但是，应该给我30

我错过了什么？

Answer 1

你会得到这样的填充＆＃34;＆＃34; （空字符串）所以你将在其中添加10，而不是在50

使用这些单独的填充，或者如果全部相同，则可以使用其中一个

注意：在Chrome中.css（＆＃34; padding＆＃34;）将返回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"))

Answer 2

在添加到parseInt之前，请务必使用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

Answer 3

当您使用css设置填充时，它实际上会被浏览器padding-left, padding-top, padding-right & padding-bottom解析为4个属性

为了get填充值，您必须使用这4个边。您不会获得顶级padding

的返回值

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

我的问题

3 个答案: