Jquery 更改 div 类的样式属性

我有一个这样的滑块类，我想更改样式属性 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'})，但它不工作。不知道我哪里做错了

335503 次浏览

小开

最佳答案

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

小开

$('.handle').css('left','300px') try this, identificator first then the value

more on this here:

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

小开

Try with

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

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

Instead of

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

小开

this helpful for you..

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

小开

Style is an attribute so css won't work for it.U can use attr

Change:

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

T0:

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

小开

if you just want to set the style attribute use

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

Or you can use css method of jQuery to set only one css style property

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

OR same as key value

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

More info on W3schools

小开

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


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


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

or use OrnaJS

小开

You can't use $('#Id').attr('style',' color:red'); and $('#Id').css('padding-left','20%');
at the same time.
You can either use attr or css but both only works when they are used alone.

小开

In order to change the attribute of the class conditionally,

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

If id is given as following,

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

Here is an alternative solution:

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