如何更改 jquery 范围内的填充答案

【问题标题】：How can I change the padding in jquery range如何更改 jquery 范围内的填充
【发布时间】：2014-12-02 06:37:24
【问题描述】：

如何使用 jQuery 设置 CSS 填充？

$('#Range2').change(function () {
    $('.lil').css({ padding: this.value + 'px' + '0px' + '0px' + '0px' });
});

【问题讨论】：

创建一些类并将该类应用到 .lil
我同意@Ganesh_Devlekar 这是一种更清洁的方法
有时你不能。就像您的工作只是使用 javascript 来改变事物一样。我以前也遇到过这种情况
只是指出，在这种特定情况下，$('.lil').css('padding-top', this.value + 'px'); 会做......

标签： jquery css function padding onchange

【解决方案1】：

$('#Range2').change(function() {
    $('.lil').css({ padding: this.value + 'px 0px 0px 0px' });
});

DEMO

或纯 JavaScript

DEMO

function changePadding() {
    lil.style["padding-top"] = this.value + 'px';
}


var lil = document.querySelector('.lil'),
    Range2 = document.querySelector('#Range2');

Range2.addEventListener("change",changePadding,false);

【讨论】：

为了方便起见，我会将“填充”放在引号中。是的，javascript 知道填充是什么，但如果你曾经想做padding-left，你需要引号 ('padding-left')
@ntgCleaner 然后使用$('.lil').css("padding-left", this.value + 'px'); 演示jsfiddle.net/GKY2A/354
@ntgCleaner 你知道你也可以写paddingLeft 不带引号吗？所以，是的，如果您引用或不引用，这只是个人喜好，没有“consitency's 缘故”
@David Kern 填充简写是 padding:top right bottom left 所以它看起来像这样 $('.lil').css({ padding: this.value + 'px 0px '+ this.value+'px 0px' }); 现场演示 jsfiddle.net/GKY2A/358
@ntgCleaner 我不会争论任何与个人偏好相关的事情（即使用驼峰式大小写或引号），但除非你能证明你所说的话，否则驼峰不会做与将它们放在引号中不同的任何东西。我已经在 i.e8 中对其进行了测试，并且工作正常。您的陈述“使用引号更容易” 是错误的，这是一种观点。

【解决方案2】：

$('.lil').css({ "padding": this.value + 'px 0px 0px 0px' });

这不起作用？

【讨论】：

顺便说一下，可以简单地用0代替0px
@Regent 正确，虽然 OP 似乎想要“px”在里面

【解决方案3】：

只需添加空格

$('.lil').css({ padding: this.value + 'px ' + '0px ' + '0px ' + '0px' });

【讨论】：

我不是反对者，但可能是因为 JS 中的空格被忽略了。 - 编辑：哦，没关系，你的意思是字符串中的空格......我的错
+ 连接错误。你最终会得到：0px0px0px –
引号下的空格，正如我上面写的，在任何语言中都不会被忽略。
@rm-vanda 它将导致0px 0px 0px，而不是0px0px0px。
@rm-vanda, false, + 连接没问题，字符串里面有空格！

【解决方案4】：

试试这个：

$('#Range2').change(function() {    
  $('.lil').css("padding", this.value + 'px 0px 0px 0px' );
}

【讨论】：

【解决方案5】：

试试这个：

$('#Range2').change(function () {
    $('.lil').css('padding', this.value + 'px' + '0px' + '0px' + '0px');
});

【讨论】：

+ 连接错误。你最终会得到：0px0px0px

【解决方案6】：

你可以用这个

通过添加' ' 它也将采用其他变量

Js Fiddle

    function padding() {
        a = $('#Range').val() + 'px'
        b = $('#Range1').val() + 'px'
        c = $('#Range2').val() + 'px'
        d = $('#Range3').val() + 'px'

        $('.test').css({
            'padding': a + ' ' + b + ' ' + c + ' ' + d
        })        
    }

【讨论】：

【解决方案7】：

最简单，随心所欲

创建 CSS

 .lil{
 padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

使用 Jquery 应用它

$('#Range2').change(function() {
$(this).addClass( "lil" );
});

【讨论】：