divクラスのスタイル属性を変更するjquery


87

このようなスライダークラスがあり、スタイル属性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'})が、機能しません。ここで何が間違っているのかわからない

回答:



84

スタイル属性を設定するだけの場合は、

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

または、jQueryのcssメソッドを使用して、1つのcssスタイルプロパティのみを設定できます。

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

またはキー値と同じ

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

W3schoolsの詳細


2
これは、選択したものよりも完全で優れた回答です
Nicola Pedretti 2018年

$('.handle').prop('style','left: 300px');あまりにも働いている
Nurkartiko

8

で試してみてください

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

の代わりに

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

@devが更新され、確実に機能することを確認しました。誤って括弧を削除しました
Raghuveer 2013年

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

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

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

またはOrnaJSを使用します



2

これはあなたに役立ちます。

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

2

スタイルは属性であるためcss、機能しません。Uは使用できますattr

変化する:

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

T0:

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

2

あなたは使用することはできません $('#Id').attr('style',' color:red');$('#Id').css('padding-left','20%');
同時に。
あなたはどちらかを使用することができますattr css、彼らが単独で使用されている場合の両方にのみ動作します。


0

クラスの属性を条件付きで変更するには、

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

idが次のように指定されている場合、

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

別の解決策は次のとおりです。

var css_val = $("#handle").css('left');
if(css_val == '336px')
{
  $("#handle").css('left','300px');
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.