jquery to change style attribute of a div class
JavascriptJqueryCssJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
Just try $('.handle').css('left', '300px');
Solution 2 - Javascript
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});
Solution 3 - Javascript
Try with
$('.handle').css({'left': '300px'});
Or
$('.handle').css('left', '300px');
Instead of
$('.handle').css({'style':'left: 300px'})
Solution 4 - Javascript
$('.handle').css('left', '300px');
$('.handle').css({
left : '300px'
});
$('.handle').attr('style', 'left : 300px');
or use OrnaJS
Solution 5 - Javascript
$('.handle').css('left','300px') try this, identificator first then the value
Solution 6 - Javascript
this helpful for you..
$('.handle').css('left', '300px');
Solution 7 - Javascript
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
Solution 8 - Javascript
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.
Solution 9 - Javascript
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');
}