Establecer atributo sin valor

194

¿Cómo configuro un atributo de datos sin agregar un valor en jQuery? Quiero esto:

<body data-body>

Lo intenté:

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

Todo lo demás parece agregar los segundos argumentos como una cadena. ¿Es posible establecer un atributo sin valor?

javascript jquery attributes attr David Hellsing
fuente
3
¿Por qué necesitas data-bodyvs data-body=""?
Píldoras de explosión
Al menos si desea usar XHTML, no debe hacerlo, ya que la minimización de atributos no está permitida.
Matthias
9
No uso XHTML, uso HTML5
David Hellsing
2
@ user1689607 porque estoy guardando el HTML generado como una cadena y necesito hacer una búsqueda inversa más adelante.
David Hellsing
44
@ExplosionPills Un ejemplo es el requiredatributo para la validación de formularios HTML5. Estoy seguro de que hay muchos otros casos de uso válidos.
Zero3

Respuestas:

250

La attr()función también es una función de establecimiento. Puedes pasarle una cadena vacía.

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

Una cadena vacía simplemente creará el atributo sin valor.

<body data-body>

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

attr (nombreAtributo, valor)

Lix
fuente
24
+1, pero el OP sabe que es un setter. El hecho de que pasar una cadena vacía funciona pero nullno funciona es algo sorprendente.
Jon
2
Javasctipt tiene algunos comportamientos extraños . Saber dónde suceden estas rarezas eliminará el elemento sorpresa: P
Lix
25
Nota: Esto no funciona con jQuery 1.7.2 (sé que esa no es la última versión), pero el uso $(el).prop('data-body', true)funcionó para mí donde $(el).attr('data-body', '')terminé configurando data-body = "data-body" para mí.
Patrick O'Doherty
66
@ PatrickO'Doherty $(el).prop('data-body', true)no funciona para mí. attr()funciona, pero también agrega una cadena vacía como valor del atributo que quiero agregar.
Webdevotion
1
@ Andrew Creo que estás buscando las funciones removeAttr / prop . Depende de qué atributo estés intentando eliminar.
Lix
47

Quizás intente:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
Callum McLean
fuente
2
Solo esta solución funcionó para mívar btn = $(this).get(0); btn.setAttribute("disabled","");
gkiko
1
Después de jugar con .attr y .prop, como se sugiere en todas las otras soluciones y comentarios aquí, finalmente descubrí que regresar (o al menos "a mitad de camino") a JS nativo, hizo el truco, como se sugiere en el comentar arriba ... ¡Salud por eso!
TheCuBeMan
22

La respuesta aceptada ya no crea un atributo de solo nombre (a partir de septiembre de 2017).

Debe usar el método JQuery prop () para crear atributos de solo nombre.

$(body).prop('data-body', true)
Charlie
fuente
En realidad, parece que estoy agregando "value = 'true'" a mi opción de selección, en lugar de solo "value". Ugh
RonLugge
¡Me preguntaba cómo la respuesta aceptada no contenía esta solución! Es la forma más limpia de usar jquery.
Denns
No funciona en las opciones desplegables seleccionadas, desafortunadamente en Chrome
MC9000 el
7

¡Puedes hacerlo sin jQuery!

Ejemplo:

document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>
Expandir fragmento

Para establecer el valor de un atributo booleano, como deshabilitado, puede especificar cualquier valor. Una cadena vacía o el nombre del atributo son valores recomendados. Lo único que importa es que si el atributo está presente, independientemente de su valor real, su valor se considera verdadero. La ausencia del atributo significa que su valor es falso. Al establecer el valor del atributo deshabilitado en la cadena vacía (""), estamos configurando deshabilitado en verdadero, lo que da como resultado que el botón se deshabilite.

Desde MDN Element.setAttribute ()

Labial
fuente
1
jQuery es demasiado descabellado a este respecto. Lo mejor es hacer javascript para no volverse loco cada vez que cambian jquery o navegadores. Esto se aplica a todos estos marcos de clientes con errores.
MC9000