jQuery: Leer y Cambiar los Valores de los Atributos Data
Tutorial de Stefan Trost | 05/05/2022 a las 01:17
En este tutorial, me gustaría mostrarle cómo leer y modificar los valores de atributo data de los elementos HTML arbitrarios utilizando JavaScript y jQuery.
He dividido el tutorial en las siguientes secciones:
- Cómo leer los Valores de los Atributos Data
- Cómo escribir los Valores de los Atributos Data
- Cómo leer y escribir cualquier Atributo
Como ejemplo, nos gustaría usar el siguiente HTML:
<div id="mydiv" data-a="1" data-b="2"></div>
Como puede ver, este es un elemento DIV con el ID "mydiv" que ha asignado 2 atributos data. En detalle, ese es el atributo "data-a" con el valor 1 y "data-b" con el valor 2.
Cómo leer los Valores de los Atributos Data
Para leer los atributos data, jQuery nos está ayudando a ofrecer el método .data(). Echemos un vistazo a un ejemplo:
var a = $("#mydiv").data("a"); var b = $("#mydiv").data("b"); var c = a + b; alert(c);
Aquí, estamos leyendo ambos atributos data del elemento DIV, estamos sumando los valores y mostrando una alerta que contiene el resultado.
Concretamente, usamos el selector $("#mydiv") para seleccionar el elemento DIV. Luego, usamos .data("a") y .data("b") para obtener los valores de los atributos. Los almacenamos en las variables a y b, guardamos la suma en la variable c y salida c con alert().
Como puede ver, al usar .data(), no tenemos que escribir "data-a" o "data-b". Es suficiente escribir "a" y "b" para acceder a los valores.
Cómo escribir los Valores de los Atributos Data
Cuando pasamos un segundo parámetro a .data(), este parámetro se escribe en el atributo data correspondiente. Aquí hay un pequeño ejemplo:
var a_new = 10; $("#mydiv").data("a", a_new); $("#mydiv").data("b", "test");
Nuevamente, usamos el selector $("#mydiv") para seleccionar el DIV. Después de eso, establecemos el atributo data "a" en una variable que hemos definido antes y estamos configurando "b" en una cadena, que hemos especificado directamente. Al hacer esto, obtenemos el siguiente resultado:
<div id="mydiv" data-a="10" data-b="test"></div>
Cómo leer y escribir cualquier Atributo
Como compaginación y como una pequeña digresión, no debe quedarse sin mencionar en este punto, cómo podemos leer y escribir cualquier otro atributo, por ejemplo, atributos que no comienzan con el prefijo "data-".
Para esos atributos, podemos usar el método .attr(). La funcionalidad es comparable a la de .data():
// leer var id = $("#mydiv").attr("id"); var a = $("#mydiv").attr("data-a"); // escribir $("#mydiv").attr("id", "new_id"); $("#mydiv").attr("data-a", 10);
Aquí leemos el valor de la ID de nuestro elemento DIV y luego cambiamos este valor a "new_id". Si queremos acceder a los atributos data con la ayuda de .attr(), ahora tenemos que usar el nombre completo, en nuestro ejemplo "data-a" en lugar de solo "a" como se usa con .data().
Sobre el Autor
Puede encontrar software de Stefan Trost en la pagina es.sttmedia.com. ¿Necesita un software individual según sus propios requisitos? Escribenos: es.sttmedia.com/contacto
Ver Perfil
Temas Relacionados
CSS: Cómo incluir CSS en HTML
Tutorial | 0 Comentarios
Unidades: Prefijos SI para Potencias de Diez
Información | 0 Comentarios
XLS y XLSX: Número máximo de Columnas y Filas
Información | 2 Comentarios
jQuery: Mostrar y Ocultar Elementos
Tutorial | 0 Comentarios
Cambiar la Protección contra Escritura de múltiples Archivos a la vez
Tutorial | 0 Comentarios
MySQL: Saltos de Línea en MySQL
Consejo | 0 Comentarios
jQuery: Deshabilitar Botón Enviar si ninguna Casilla de Verificación está marcada
Tutorial | 5 Comentarios
Aviso Importante
Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.
Participar
Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.