web-dev-qa-db-ja.com

jqueryを使用してdivにスタイル属性を追加および削除する

私が取り組んでいるプロジェクトを継承し、jqueryアニメーションを更新しています（jqueryを使用することはほとんどありません）。

スタイル属性を追加および削除する必要があるdivがあります。 divは次のとおりです。

<div id='voltaic_holder'>

アニメーションのある時点で、スタイルを追加する必要があります。

<div id='voltaic_holder' style='position:absolute;top:-75px'>

私は周りを検索して.removeAttr()メソッドを見つけましたが、それを追加する方法、またはそのリモート部分（top：-75pxのみなど）を見つける方法がわかりません。

おかげで、

jquerycssdhtml
89
drpcken

次のいずれかを行うことができます

各スタイルプロパティを個別に設定します。

$("#voltaic_holder").css("position", "relative");

複数のスタイルプロパティを一度に設定します。

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

特定のスタイルを削除します。

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

スタイル属性全体を削除します。

$("#voltaic_holder").removeAttr("style")
212
Adam Albrecht

voltaic_holderスパンのスタイル属性を完全に削除するには、次のようにします。

$("#voltaic_holder").removeAttr("style");

属性を追加するには、次を実行します。

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

トップスタイルのみを削除するには、次の操作を行います。

$("#voltaic_holder").css("top", "");
20
Peter Olson

JQueryを使用している場合は、 css を使用してCSSを追加します

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

CSS属性を削除するには

$("#voltaic_holder").css({'position': '',
    'top': ''});
16
justkt

これを処理する簡単な方法（および起動に最適なHTMLソリューション）は、使用するスタイルを持つクラスを設定することです。次に、 addClass（） および removeClass（） 、または toggleClass（） を使用するだけの簡単な問題です。

$('#voltaic_holder').addClass('shiny').removeClass('dull');

あるいは

$('#voltaic_holder').toggleClass('shiny dull');
9
Surreal Dreams

答えはこちら jQueryを使用してtext-alignのスタイルを動的に追加する方法

2
TheHorse

の場合 .css jQueryのメソッド ！重要 ルールは適用されません。

この場合、使用する必要があります .attr 関数。

例：以下のようにスタイルを追加する場合：

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

以下を使用する必要があります。

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

それが何らかの助けになることを願っています。

2
Adiyya Tadikamalla

Jクエリを使用してdivからスタイル属性を削除します。

$("#TableDiv").removeAttr("style");

Jqueryを使用してdivにスタイルを追加します。

$("#TableDiv").attr("style", "display: none;");

HTMLを使用してスタイルを追加します。

<div class="row" id="TableDiv" style="display: none;">
</div>

それが役立つことを願っています:)

1
Wajid khan