使用jQuery更改div类的样式属性

Question

我有一个这样的滑动条类，我想要更改style属性style="left: 336px"

<div id="range-cont">
<div class="slider">
<div class="progress" style="width: 350px;"></div>
    <a class="handle" href="#" **style="left: 336px;"**></a>
</div>
<input id="percentage" class="range" type="range" value="14" name="percentage" min="0" max="100">
<p id="percent-label">%</p>
</div>
</div>

我尝试使用$('.handle').css({'style':'left: 300px'})，但它没有生效。不确定我在这里做错了什么。

- Anurag Sharma

Answer 1

尝试使用$('.handle').css('left', '300px');

- Ganesh D

Answer 2

如果你只想设置样式属性，请使用

$('.handle').attr('style','left: 300px');

或者您可以使用jQuery的css方法来设置一个CSS样式属性。

$('.handle').css('left', '300px');

或者与键值相同

$('.handle').css({'left': '300px'});

W3schools更多信息

- The Code

---

这个回答更加完整和优秀，比被选中的那个更好。 - Nicola Pedretti

$('.handle').prop('style','left: 300px'); 也是有效的。 - Nurkartiko

Answer 3

$('.handle').css('left', '300px');

$('.handle').css({
    left : '300px'
});

$('.handle').attr('style', 'left : 300px');

或者使用OrnaJS。

- Дима Попов

Answer 4

尝试使用

$('.handle').css({'left': '300px'});

或者

$('.handle').css('left', '300px');

与其

$('.handle').css({'style':'left: 300px'})

- Raghuveer

Answer 5

$('.handle').css('left','300px') 尝试这样做，先指定标识符再设定值

关于此更多内容请参见：

http://api.jquery.com/css/

- q99

Answer 6

this helpful for you..

$('.handle').css('left', '300px');

- Sridhar R

Answer 7

样式是一个属性，因此css不能用于它。您可以使用attr。

更改：

$('.handle').css({'style':'left: 300px'});

T0:

$('.handle').attr('style','left: 300px');//Use `,` Comma instead of `:` colon

- Somnath Kharat

Answer 8

您不能同时使用$('#Id').attr('style',' color:red');和$('#Id').css('padding-left','20%');
。您只能在单独使用attr或css时才能正常工作。

- Kavya Hanumantharaju

Answer 9

为了有条件地更改类的属性，

var css_val = $(".handle").css('left');
if(css_val == '336px')
{
  $(".handle").css('left','300px');
}

如果给定id如下，

<a id="handle" class="handle" href="#" style="left: 336px;"></a>

这里有一个替代方案：

var css_val = $("#handle").css('left');
if(css_val == '336px')
{
  $("#handle").css('left','300px');
}

- persec10000