jquery para alterar o atributo de estilo de uma classe div

87

Eu tenho uma classe deslizante como esta e desejo alterar o atributo de estilo 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>

Eu tentei, $('.handle').css({'style':'left: 300px'})mas não está funcionando. Não tenho certeza do que estou fazendo de errado aqui

Anurag Sharma
fonte

Respostas:

151

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

Ganesh D
fonte
84

se você apenas deseja definir o atributo de estilo, use

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

Ou você pode usar o método css de jQuery para definir apenas uma propriedade de estilo css

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

OU igual ao valor-chave

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

Mais informações sobre W3schools

O código
fonte
2
esta é uma resposta mais completa e melhor do que a selecionada
Nicola Pedretti
$('.handle').prop('style','left: 300px');também está funcionando
Nurkartiko
8

Tente com

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

Ao invés de

$('.handle').css({'style':'left: 300px'})
Raghuveer
fonte
@dev atualizado agora verifique se vai funcionar com certeza, eu removi os parênteses por engano
Raghuveer
7
$('.handle').css('left', '300px');

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

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

ou use OrnaJS

Дима Попов
fonte
2

isso é útil para você ..

$('.handle').css('left', '300px');
Sridhar R
fonte
2

O estilo é um atributo, então cssnão funcionará para ele. Você pode usarattr

Mudança:

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

T0:

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

Você não pode usar $('#Id').attr('style',' color:red'); e $('#Id').css('padding-left','20%');
ao mesmo tempo.
Você pode usar attr ou, css mas ambos só funcionam quando usados ​​sozinhos.

Kavya Hanumantharaju
fonte