Question

我想在此css更改中添加或减去'top'的值。而不是指定特定的像素数量，我想将20px添加到外部css提供的当前值。

目标是让列表向下移动。

$('.up').click(function(){
   $('.list').css('top','-20px');
});

HTML

<div id="container">
    <ul class="list">
        <li >first item</li>
        <li class="active">second item</li>
        <li>third item</li>
        <li >fourth item</li>
    <ul>
</div>   
<a href="#" class="up">up</a>
<a href="#" class="up">down</a>

Answer 1

根据您的修改：

$('.up').click(function(){
   $('.list').css({position:'absolute', top: parseInt($('.list').css('top'), 10) + 20 + 'px'});
});

或者，您可以在使用20px时按每次点击添加animate：

$('.up').click(function(){
   $('.list').css({position:'absolute'});
   $('.list').animate({top: '+=20'});
});

除非您同时指定top：

，否则position属性将无效

$('.up').click(function(){
   $('.list').css({position:'absolute', top:'-20px'});
});

根据您的需要将position更改为absolute或relative。

请注意，如果您希望.list元素仅在更改top时显示在其容器内，则需要将position:relative分配给父元素，将absolute分配给{{1}元素。

Answer 2

.css()方法还允许.animate()采用“+ =”和“ - =”语法。所以你可以这样做：

$('.up').click(function(){
   $('.list').css('top','-=20px');
});

Answer 3

请参阅此JSFiddle以获取完整示例：http://jsfiddle.net/NYVmw/

$('.up').click(function(){
    var newtop = $('.list').position().top - 20;
    $('.list').css('top', newtop + 'px');
});

$('.down').click(function(){
    var newtop = $('.list').position().top + 20;
    $('.list').css('top', newtop + 'px');
});

Answer 4

将“up”课程更改为按钮的不同ID

<a href="#" id="up">up</a>
<a href="#" id="down">down</a>

获取容器margin-top的当前值并对其进行修改：

$('#up').on('click', function(){
  currentValue = parseInt($('#container').css("margin-top"));
  currentValue -= amount;
  $('#container').css("margin-top", currentValue)
})

$('#down').on('click', function(){
  currentValue = parseInt($('#container').css("margin-top"));
  currentValue += amount;
  $('#container').css("margin-top", currentValue)
})

Answer 5

CSS并不是真正用于数学和操作，而是仅用于指定样式。最好的方法是在javascript中使用

getElementById("nameofyourelement").style['top'] = "5px"

例如，

。使用CSS3动画甚至会更好。喜欢这个

getElementById("nameofyourelement").style['-webkit-transition-duration'] = "1s" //1 second duration for animation, set to 0 if you don't want animation
getElementById("nameofyourelement").style['-webkit-transform'] = "translateY(5px)"

Answer 6

$('.list').css('position','relative').css('top','-20px');

jQuery以递增方式添加css值

6 个答案: