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>
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
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')estrueen JavaScript. Pero si lo comparas con cualquiera de esos otros valores, esfalse. 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
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.
contenteditableno 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
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, elselectedpropiedad booleana, puede recibir los valores booleanostrueofalsemientras que el valor del atributo debe serselected(selected="selected") o la cadena vacía (selectedoselected="").– 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
contenteditableno 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