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?

— 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

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

1

No estoy seguro de si esto es realmente beneficioso o por qué prefiero este estilo, pero lo que hago (en vainilla js) es:

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

Esto agregará el atributo en minúsculas sin un valor o lo eliminará si ya existe en el elemento.

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

— Brent N.
fuente