値なしで属性を設定

194

jQueryに値を追加せずにデータ属性を設定するにはどうすればよいですか？これ欲しい：

<body data-body>

私は試した：

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

その他はすべて、2番目の引数を文字列として追加するようです。値なしで属性を設定することは可能ですか？

— デビッドヘルシング
ソース

3

なぜあなたはdata-body対する必要がありdata-body=""ますか？

— 爆発の丸薬

少なくともXHTMLを使用する場合は、属性の最小化が許可されていないため、XHTMLを使用しないでください。

— Matthias

9

私はXHTMLを使用せず、HTML5を使用します

— David Hellsing 2012年

2

@ user1689607生成されたHTMLを文字列として保存していて、後で逆引きを行う必要があるためです。

— David Hellsing、

4

@ExplosionPills 1つの例は、requiredHTML5フォーム検証の属性です。他にも有効なユースケースはたくさんあると思います。

— Zero3 2015年

250

このattr()関数はセッター関数でもあります。空の文字列を渡すだけです。

$('body').attr('data-body','');

空の文字列は、値のない属性を作成するだけです。

<body data-body>

リファレンス-http://api.jquery.com/attr/#attr-attributeName-value

attr（attributeName、value）

— リックス
ソース

24

+1ですが、OPはそれがセッターであることを認識しています。空の文字列を渡すことは機能しますが、nullそうではないという事実は多少意外です。

— 2012年

2

Javasctiptには、いくつかの奇妙な動作があります。これらの奇妙なことがどこで起こるかを知ることは、驚きの要素を取り除くでしょう：P

— Lix

25

注：これはjQuery 1.7.2では動作しません（私はそれが最新バージョンではないことを知っています）が$(el).prop('data-body', true)、私にとって$(el).attr('data-body', '')data-body = "data-body"を設定することで機能しました。

— Patrick O'Doherty、2013年

6

@ PatrickO'Doherty $(el).prop('data-body', true)は動作しません。 attr()機能しますが、追加する属性の値として空の文字列も追加されます。

— Webdevotion 2014年

1

@Andrew私はあなたがremoveAttr / prop関数を探していると思います。削除しようとしている属性によって異なります。

— Lix

47

おそらく試してください：

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");

— カラム・マクリーン
ソース

2

このソリューションだけが私にとってvar btn = $(this).get(0); btn.setAttribute("disabled","");

— うまくいき

1

ここで他のすべてのソリューションとコメントで提案されているように、.attrと.propをいじり回した後、ネイティブJSに戻る（または少なくとも「途中」に戻る）と、上記のコメント...乾杯！

— TheCuBeMan 2016年

22

受け入れ答えはありません（2017年9月現在）もはや名専用の属性を作成します。

名前のみの属性を作成するには、JQueryのprop（）メソッドを使用する必要があります。

$(body).prop('data-body', true)

— チャーリー
ソース

実際、selectオプションに「value」だけでなく「value = 'true'」を追加しているようです。ああ。

— RonLugge 2018

受け入れられた回答にこの解決策が含まれていないのかと思っていました！jqueryを使用する最もクリーンな方法です。

— Denns

残念ながらChromeの一部のドロップダウンオプションでは機能しません

— MC9000

7

あなたはjQueryなしでそれを行うことができます！

例：

document.querySelector('button').setAttribute('disabled', '');

<button>My disabled button!</button>

スニペットを展開

無効などのブール属性の値を設定するには、任意の値を指定できます。空の文字列または属性の名前が推奨値です。重要なことは、実際の値に関係なく、属性が存在する場合、その値はtrueと見なされるということです。属性がない場合、その値はfalseです。disabled属性の値を空の文字列（ ""）に設定すると、disabledがtrueに設定され、ボタンが無効になります。

以下からのMDN Element.setAttribute（）

— LipESprY
ソース

1

この点でjQueryは不安定です。jqueryやブラウザが変更されるたびに気が狂わないように、javascriptで行うのが最善です。これは、これらすべてのバグの多いクライアントフレームワークに当てはまります。

— MC9000

1

これが本当に有益であるかどうか、またはなぜ私がこのスタイルを好むのかはわかりませんが、私が行うこと（バニラjsで）は次のとおりです。

document.querySelector('#selector').toggleAttribute('data-something');

これにより、属性が値なしですべて小文字で追加されるか、要素にすでに存在する場合は削除されます。

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

— ブレント・N
ソース