Imposta attributo senza valore

194

Come posso impostare un attributo di dati senza aggiungere un valore in jQuery? Voglio questo:

<body data-body>

Provai:

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

Tutto il resto sembra aggiungere il secondo argomento come stringa. È possibile impostare un attributo senza valore?

— David Hellsing
fonte

3

Perché avete bisogno data-bodyvs data-body=""?

— Pillole di esplosione il

Almeno se vuoi usare XHTML, non dovresti farlo poiché la minimizzazione degli attributi non è consentita.

— Matthias,

9

Non uso XHTML, utilizzo HTML5

— David Hellsing,

2

@ user1689607 perché sto salvando l'HTML generato come stringa e in seguito dovrò fare una ricerca inversa.

— David Hellsing,

4

@ExplosionPills Un esempio è l' requiredattributo per la convalida del modulo HTML5. Sono sicuro che ci sono molti altri casi d'uso validi.

— Zero3,

252

La attr()funzione è anche una funzione setter. Puoi semplicemente passargli una stringa vuota.

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

Una stringa vuota creerà semplicemente l'attributo senza valore.

<body data-body>

Riferimento - http://api.jquery.com/attr/#attr-attributeName-value

attr (attributoNome, valore)

— Lix
fonte

24

+1, ma l'OP sa che è un setter. Il fatto che passare una stringa vuota funzioni ma nullnon è sorprendente.

— Jon,

2

Javasctipt ha alcuni comportamenti strani . Sapere dove si verificano queste stranezze eliminerà l'elemento sorpresa: P

— Lix,

25

Nota: questo non funziona con jQuery 1.7.2 (so che non è l'ultima versione) ma l'utilizzo ha $(el).prop('data-body', true)funzionato per me dove ho $(el).attr('data-body', '')finito per impostare data-body = "data-body" per me.

— Patrick O'Doherty,

6

@ PatrickO'Doherty $(el).prop('data-body', true)non funziona per me. attr()funziona ma aggiunge anche una stringa vuota come valore dell'attributo che voglio aggiungere.

— Webdevotion

1

@Andrew Credo che tu stia cercando le funzioni removeAttr / prop . Dipende dall'attributo che stai cercando di rimuovere.

— Lix,

47

Forse prova:

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

— Callum McLean
fonte

2

Solo questa soluzione ha funzionato per mevar btn = $(this).get(0); btn.setAttribute("disabled","");

— gkiko,

1

Dopo aver pasticciato con .attr e .prop, come suggerito in tutte le altre soluzioni e commenti qui, ho finalmente scoperto che tornare (o almeno "a metà strada" indietro) al nativo JS, ha fatto il trucco, come suggerito nel commento sopra ... Saluti per quello!

— TheCuBeMan

body.setAttribute("data-body","");questo imposterà il valore 'falso' del mio attributo, come posso impostare il valore "" (vuoto) di un attributo?

— Archana Sharma

22

La risposta accettata non crea più un attributo solo nome (a partire da settembre 2017).

È necessario utilizzare il metodo prop () di JQuery per creare attributi di solo nome.

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

— Charlie
fonte

In realtà, mi sembra di aggiungere "value = 'true'" alla mia opzione di selezione, anziché solo "value". Ugh.

— RonLugge,

mi chiedevo come la risposta accettata non contenesse questa soluzione! è il modo più pulito usando jquery.

— Denns

Sfortunatamente non funziona con alcune opzioni a discesa, in Chrome purtroppo

— MC9000,

7

Puoi farlo senza jQuery!

Esempio:

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

<button>My disabled button!</button>

Espandi frammento

Per impostare il valore di un attributo booleano, ad esempio disabilitato, è possibile specificare qualsiasi valore. Una stringa vuota o il nome dell'attributo sono valori consigliati. Tutto ciò che conta è che se l'attributo è presente, indipendentemente dal suo valore reale, il suo valore è considerato vero. L'assenza dell'attributo significa che il suo valore è falso. Impostando il valore dell'attributo disabilitato sulla stringa vuota (""), impostiamo disabilitato su true, il che comporta la disabilitazione del pulsante.

Da MDN Element.setAttribute ()

— LipESprY
fonte

1

jQuery è troppo debole in questo senso. Meglio fare in javascript per non impazzire ogni volta che cambiano jquery o browser. Questo vale per tutti questi framework client buggy.

— MC9000,

1

Non sono sicuro se questo sia davvero utile o perché preferisco questo stile, ma quello che faccio (in vanilla js) è:

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

Ciò aggiungerà l'attributo in minuscolo senza un valore o lo rimuoverà se esiste già sull'elemento.

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

— Brent N.
fonte