Usando atributos de datos

Por favor, teña en conta que, porque os atributos de datos son atributos HTML sinxelos, incluso pode acceder a eles desde CSS. Por exemplo, para mostrar o data-parent no artigo, pode usar o contido xerado en CSS coa función attr:

article::before { content: attr(data-parent);}

Tamén pode usar as seleccións de atributo en CSS para cambiar os estilos de acordo coas primipresas de datos:

article { width: 400px;}article { width: 600px;}

Podes ver todo isto traballando xuntos neste exemplo de JSBIN.

Os atributos de datos tamén se poden almacenar para que conteñan información constantemente cambiando, como puntuacións nun xogo. Usando selectores CSS e acceso a JavaScript aquí, isto permítelle crear algúns efectos xeniais sen ter que escribir as súas propias rutinas de visualización. Vexa este screencast para ver un exemplo usando contido xerado e transaccións CSS (exemplo JSBIN).

Os valores de datos son cadeas de caracteres. Os valores numéricos deben ser citados no selector para que o estilo teña efecto.

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *