para - ¿Puedo usar los atributos de datos*de HTML5 como atributos booleanos?

etiqueta button html

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Son válidos los atributos de datos HTML5 vacíos? 4 respuestas

Quiero usar un atributo booleano personalizado para marcar el contenido de un elemento como editable. Soy consciente de los atributos de data-* , pero no estaba seguro de si requieren un valor. No necesito data-is_editable="false" , ya que la falta del atributo sería equivalente. Solo me importa si es "verdadero" (si el atributo existe). Sé que puedo usar otros atributos como la class pero no quiero, ya que me parece un poco inapropiado (corríjame si me equivoco al respecto).

Aquí está el recurso que estoy leyendo, tal vez sea el documento equivocado o he pasado por alto la información que estoy buscando: http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

Entonces, por ejemplo, ¿es esto legal y válido?

<div data-editable data-draggable> My content </div>

Answer 1

El ejemplo que muestres es válido. (Al igual que usar disabled o checked en un formulario. Solo xHTML fuerza la presencia de un valor)

Aunque, el valor devuelto no es un booleano. Cuando consulta este recurso, obtendrá una cadena vacía para cualquier atributo de data-* vacío.

Al igual que:

 domNode.dataset.draggable; // log ""
domNode.dataset.notAdded; // log null

Entonces, solo hay que comprobarlo:

var isDraggable = (domNode.dataset.draggable != null)

Editar

Estúpido por no haberlo dicho antes. Pero, solo puedes verificar si el atributo existe si quieres un booleano:

domNode.hasAttribute("data-draggable");

Answer 2

Pasa el validador W3.org , que es una buena señal.

El dataset de dataset de Javascript y las funciones de data de jQuery parecen saber la diferencia entre el atributo que está allí o el que falta, pero el valor es una cadena vacía cuando está allí y no está definido o es nulo cuando no lo está. Para evitar confusiones, no creo que lo use personalmente; en su lugar, probablemente optaría por <div data-editable="1"></div> .