jquery to change style attribute of a div class

Question

I have a slider class like this and I wan to change the style attribute 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>

I tried $('.handle').css({'style':'left: 300px'}) but its not working. Not sure what I am doing wrong here

Answer 1

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

Answer 2

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

Answer 3

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

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

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

or use OrnaJS

Answer 4

Try with

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

Or

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

Instead of

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

Answer 5

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

more on this here:

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

Answer 6

this helpful for you..

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

Answer 7

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

Answer 8

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.

Answer 9

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');
}