Cómo agregar un atributo booleano usando JavaScript

6 minutos de lectura

avatar de usuario de ryanve
ryanve

¿Cómo se agregan atributos booleanos usando JavaScript? Por ejemplo, ¿cómo se puede cambiar:

<p> a <p contenteditable>

<p> a <p data-example>

  • Esos son atributos HTML. Si son de naturaleza booleana realmente no importa. Para contenteditable, puede tratarlo como un par de atributo/valor HTML estándar contenteditable="true"

    – DA.

    8 de febrero de 2012 a las 21:13

  • @DA Importa si desea configurarlos utilizando la propiedad IDL en lugar de hacerlo a través de setAttribute(). por ejemplo, el selected propiedad booleana, puede recibir los valores booleanos true o falsemientras que el valor del atributo debe ser selected (selected="selected") o la cadena vacía (selected o selected="").

    – Mathias Bynens

    8 de febrero de 2012 a las 21:21


  • @DA En la especificación, se los denomina atributos booleanos w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2

    – ryanve

    8 de febrero de 2012 a las 21:23

  • contenteditable no es un atributo booleano. Vea mi respuesta: stackoverflow.com/a/9201499/96656

    – Mathias Bynens

    08/02/2012 a las 21:35

  • ¡Gracias por las aclaraciones! Sí, estaba equivocado. Una variable booleana verdadera solo puede tener un valor por sí misma. Supongo que lo que quería decir es que, independientemente de si es booleano o no, puede tratarlo como cualquier otra entidad html en el sentido de que puede tener un valor. Dicho esto, no estoy al tanto de lo que es IDL, por lo que muy bien podría ser algo completamente diferente.

    – DA.

    8 de febrero de 2012 a las 22:56

Para agregar un atributo booleano:

node.setAttribute(attributeName, '');
// example:
document.body.setAttribute('hidden', '');

Nota la cadena vacía como segundo argumento!

Usar node.removeAttribute(attributeName) para eliminar un atributo mencionado por otros.

  • Esta es la única respuesta que en realidad responde directamente a la pregunta de cómo establecer un atributo booleano no reflejado.

    – tomturton

    12 de octubre de 2016 a las 7:52


  • Respuesta correcta.

    usuario670839

    27 de marzo de 2020 a las 0:01

Avatar de usuario de Mathias Bynens
Mathias Bynen

En general, puede utilizar element.setAttribute('attributeName', 'value') o element.propertyName = value para alternar los atributos o propiedades de un elemento.

Atributos booleanos

Para los atributos booleanos, establezca el atributo con el valor del mismo nombre:

element.setAttribute('disabled', 'disabled');

Eliminar un atributo booleano funciona de la misma manera que otros atributos:

element.removeAttribute('disabled');

Sin embargo, ninguno de sus dos ejemplos son atributos booleanos!

contenteditable

contenteditable es no un atributo booleano, es un atributo enumerado. Sus posibles valores son la cadena vacía, "true"y "false".

Tiempo setAttribute parece excesivo en este caso, podrías usarlo:

element.setAttribute('contenteditable', 'true');
// to undo:
element.removeAttribute('contenteditable');

El nombre de la propiedad para el contenteditable el atributo es contentEditable (nótese la capital E), y reconoce los valores 'true', 'false'y 'inherit' – así que podrías usar:

element.contentEditable="true";
// to undo:
element.contentEditable="false";

Tenga en cuenta que 'true' y 'false' son cadenas aquí, no booleanos.

data-example

Para el data-example atributo, podrías usar:

element.setAttribute('data-example', 'some value'); // the value should be a string
// to undo:
element.removeAttribute('data-example');

O, en navegadores que soportan dataset (ver los resaltados en verde claro en http://caniuse.com/dataset), podrías usar:

element.dataset.example="some value";

  • Ah sí enumerado:]Comparando una cadena vacía "" === elem.getAttribute('contenteditable') es true en JavaScript. Pero si lo comparas con cualquiera de esos otros valores, es false. En el navegador para contenteditable, tanto “la cadena vacía como la palabra clave verdadera se asignan al estado verdadero” w3.org/TR/html5/editing.html#contenteditable

    – ryanve

    8 de febrero de 2012 a las 21:49


  • @ryanve Bueno, por supuesto; '' == '' en JavaScript, así que si usas <p contenteditable> o <p contenteditable="">, p.getAttribute('contenteditable') == ''.

    – Mathias Bynens

    8 de febrero de 2012 a las 21:54

  • Esto no responde la pregunta.

    – kleinfreund

    17 de agosto de 2017 a las 7:57

  • @kleinfreund Eso es incorrecto. Los atributos personalizados no se pueden atributos booleanos¡por definición! Tú podrías mas o menos trate un atributo personalizado como si fuera booleano, pero aun así se comportaría de manera diferente a un atributo booleano real.

    – Mathias Bynens

    31 de agosto de 2017 a las 12:12


  • @kleinfreund Un ejemplo de atributo booleano es hidden. <p hidden> o <p hidden=""> o <p hidden="hidden"> son todos equivalentes. Cualquier atributo que no esté definido como un atributo booleano en la especificación (incluidos los atributos personalizados) no obtiene mágicamente ese comportamiento. Para los atributos personalizados, tendría que implementar algo similar usted mismo, y aún así no sería una propiedad booleana real, ya que no pasaría por la misma canalización en el navegador.

    – Mathias Bynens

    1 de septiembre de 2017 a las 17:05

El avatar de usuario de Nail
La uña

Para establecer un atributo

Usar element.setAttribute: https://developer.mozilla.org/en/DOM/element.setAttribute

Si agrega un id como esto:

<p id="p1">

puede seleccionar el elemento como este:

var p1 = document.getElementById("p1"); 

Para establecer un atributo booleano

De acuerdo con la Especificación W3C HTML4:

Los atributos booleanos pueden tomar legalmente un solo valor: el nombre del atributo en sí

para que pueda agregar su atributo de esta manera:

p1.setAttribute("contenteditable", "contenteditable");

Para establecer contenido Editable

De acuerdo con la Especificación W3C HTML5el atributo contentEditable puede tener valores true, false y inherit. Entonces tendrías que hacer algo como esto:

p1.setAttribute("contenteditable", "true");

Para ser honesto, tampoco estoy seguro de cuál es el mejor en su situación.

  • eso lo hace <p id="p1" contenteditable="true"> que no es lo mismo que <p id="p1" contenteditable>

    – ryanve

    8 de febrero de 2012 a las 21:20


  • @ryanve Es lo mismo. contenteditable no es un atributo booleano. Vea mi respuesta: stackoverflow.com/a/9201499/96656 @TheNail Es posible que desee revertir esa edición, ya que esto no tiene nada que ver con los atributos booleanos.

    – Mathias Bynens

    8 de febrero de 2012 a las 21:36

  • ¿Hay una función de combinación para las respuestas? 😀

    – La uña

    8 de febrero de 2012 a las 21:49

element.setAttribute('contenteditable','contenteditable')

o para borrar:

element.removeAttribute('contenteditable')

Usar element.dataset.example para modificar el valor de la data-example atributo.

  • Creo que, para ser equivalente, lo establecería en una cadena vacía. element.dataset.example = "" Ver stackoverflow.com/questions/9200712/…

    – ryanve

    8 de febrero de 2012 a las 21:52

Citado de MDN:

Los atributos booleanos se consideran verdaderos si están presentes en el elemento, independientemente de su valor real; como regla, debe especificar la cadena vacía (“”) en valor (algunas personas usan el nombre del atributo; esto funciona pero no es estándar).

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

  • Creo que, para ser equivalente, lo establecería en una cadena vacía. element.dataset.example = "" Ver stackoverflow.com/questions/9200712/…

    – ryanve

    8 de febrero de 2012 a las 21:52

¿Ha sido útil esta solución?