jquery, um das Stilattribut einer div-Klasse zu ändern

86

Ich habe eine Slider-Klasse wie diese und möchte das Stilattribut style = "left: 336px" ändern.

<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>

Ich habe es versucht, $('.handle').css({'style':'left: 300px'})aber es funktioniert nicht. Ich bin mir nicht sicher, was ich hier falsch mache

javascript jquery css

— Anurag Sharma
quelle

150

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

— Ganesh D.
quelle

82

Wenn Sie nur das Stilattribut festlegen möchten, verwenden Sie

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

Oder Sie können die CSS-Methode von jQuery verwenden, um nur eine CSS-Stileigenschaft festzulegen

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

ODER wie Schlüsselwert

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

Weitere Infos zu W3schools

— Der Code
quelle

2

Dies ist eine vollständigere und bessere Antwort als die ausgewählte

— Nicola Pedretti

$('.handle').prop('style','left: 300px');funktioniert auch

— Nurkartiko

8

Versuche es mit

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

Anstatt

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

— Raghuveer
quelle

@dev jetzt aktualisiert überprüfen Sie, ob es sicher funktioniert, ich habe versehentlich Klammern entfernt

— Raghuveer

7

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

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

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

oder benutze OrnaJS

— Дима Попов
quelle

4

$('.handle').css('left','300px') Versuchen Sie dies, Bezeichner zuerst, dann den Wert

mehr dazu hier:

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

— q99
quelle

2

das ist hilfreich für dich ..

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

— Sridhar R.
quelle

2

Stil ist ein Attribut, daher cssfunktioniert es nicht. Sie können es verwendenattr

Veränderung:

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

T0:

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

— Somnath Kharat
quelle

2

Sie können nicht verwenden $('#Id').attr('style',' color:red'); und $('#Id').css('padding-left','20%');
gleichzeitig an.
Sie können entweder verwenden attr oder css beide funktionieren jedoch nur, wenn sie alleine verwendet werden.

— Kavya Hanumantharaju
quelle