DOKRY
  1. DOKRY
  3. Valores de CSS con el atributo de datos HTML5
Intereting Posts
¿Por qué las sales hacen que los ataques de diccionario sean “imposibles”? Por qué la covarianza y la contravarianza no son compatibles con el tipo de valor Obtener una imagen en miniatura del archivo de video en C # Cómo configurar ‘Ejecutar como administrador’ en un archivo usando Inno Setup Intentando leer desde la consola en Java ¿Es posible atrapar la excepción de memoria en java? Reemplazos para módulos JPMS obsoletos con API de Java EE Reproducir sonido de alerta (igual que el tono de llamada predeterminado) El método no se puede traducir en una expresión de tienda UIButton: hacer que el área de golpe sea más grande que el área de golpe predeterminada Simulación de uniones de contexto cruzado – LINQ / C # GZIPInputStream leyendo línea por línea ¿Podemos instanciar una clase abstracta? ¿Cuál es el Framework BDD más maduro para .NET? Opción ‘Solución limpia’ de Visual Studio (2008)

Valores de CSS con el atributo de datos HTML5

 
width: attr(data-width);

Quiero saber si hay alguna manera de establecer un valor de css utilizando el atributo de data- de HTML5 de la misma manera que puede establecer el content css. Actualmente no funciona.

HTML

CSS 

 div { width: attr(data-width) }

De hecho, hay una previsión para tal característica, mira http://www.w3.org/TR/css3-values/#attr-notation

Este violín debería funcionar como lo que necesita, pero no lo hará por ahora.

Desafortunadamente, sigue siendo un borrador y no está completamente implementado en los principales navegadores.

Sin embargo, funciona para content en pseudo-elementos.

Puede crear con javascript algunas rules css, que luego puede usar en sus estilos: http://jsfiddle.net/ARTsinn/vKbda/ 

 var addRule = (function (sheet) { if(!sheet) return; return function (selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); } }(document.styleSheets[document.styleSheets.length - 1])); var i = 101; while (i--) { addRule("[data-width='" + i + "%']", "width:" + i + "%"); }

Esto crea 100 pseudo-selectores como este: 

 [data-width='1%'] { width: 1%; } [data-width='2%'] { width: 2%; } [data-width='3%'] { width: 3%; } ... [data-width='100%'] { width: 100%; }

Nota: Esto es un poco offtopic, y no realmente lo que usted (o alguien) quiere, pero tal vez útil.

A partir de hoy, puede leer algunos valores de atributos de data HTML5 en declaraciones CSS3. En el violín de CaioToOn, el código CSS puede usar las propiedades de data para configurar el content .

Desafortunadamente no funciona para el width y la height (probado en Google Chrome 35, Mozilla Firefox 30 e Internet Explorer 11).

Pero hay un Polyfill CSS3 attr () de Fabrice Weinberg que proporciona soporte para data-width data-height . Puede encontrar el repository de GitHub aquí: cssattr.js .