¿Cómo puedo leer atributos HTML con JS y generar CSS dinamico?

quico5 · #1 (**permalink**) 13/07/2014, 14:48

Ejemplo:

Código HTML:

<div celda='1/5'>prueba1</div>

Con CSS seria

Código HTML:

<style>[celda='1/5'] {width:20%;}</style>

Pero prefiero hacerlo dinámico, de forma que cuando halla atributos CELDA se extraiga su contenido y se aplique la formula (100*(1/5))px al width elegido desde el propio atributo

P.D: veo que hay mini alternativas a jQuery para CSS3 que usan la misma sintaxis que jQuery que igual podrían ser mas cómodas que JS puro, como es el caso de http://sizzlejs.com/

gracias

Alexis88 · #2 (**permalink**) 13/07/2014, 21:08

Podrías tomar a todos los elementos con ese atributo utilizando el método querySelectorAll:

Código Javascript:

Ver originalvar celdas = document.querySelectorAll("[celda]");

Y ya luego puedes realizar lo que desees con dichos elementos, pero si quieres crear atributos personalizados, te aconsejo utilizar pseudo-atributos data-*.

Código HTML:

Ver original<div data-celda = "1/5"></div>

Saludos

quico5 · #3 (**permalink**) 14/07/2014, 07:58

Gracias por responder Alexis88

Supongo que el siguiente código es parte de lo que necesito

Código:

celdaActual = document.querySelectorAll(data-celda);

veamos, pare del CSS es así:

Código HTML:

<style>
[data-fila] {display:table; margin:0 auto; width:100%;}
[data-fila='800'] {max-width: 800px;}
[data-fila='960'] {max-width: 960px;}
[data-celda] {display:table-cell; vertical-align:top; padding:0 10px;}												[data-data-celda='1/3'] {width:33.3333%;}
[data-celda='2/3'] {width:66.6666%;}
[data-celda='1/4'] {width:25%;}
[data-celda='3/4'] {width:75%;}
[data-celda='1/5'] {width:20%;}
[data-celda='2/5'] {width:40%;}
[data-celda='3/5'] {width:60%;}
[data-celda='4/5'] {width:80%;}
</style>

	<div data-fila='960'>
		<div data-celda='1/5'>prueba1</div>
		<div data-celda='3/5'>prueba0</div>
		<div data-celda='1/5'>prueba2</div>
	</div>

No se si me he explicado correctamente, pero creo que puedo sustituir gran parte del css por js, de tal forma que si tenemos un data-celda="3/5" automáticamente que herede un width="(100*(3/5))%"

Al igual que su contenedor padre -> width="(960)px"

P.D: ¿el prefijo DATA- es solo una recomendación visual o es algo más?

Alexis88 · #4 (**permalink**) 14/07/2014, 09:09

Ahora sí está más claro. Bueno, en ese caso, creo que sería mejor si en lugar de fracciones, colocaras los valores porcentuales y luego de tomar a los elementos que tengan el pseudo-atributo data-celda, solo te queda tomar el valor del mismo, es decir:

Código HTML:

Ver original<div data-celda = "50%"></div>
<div data-celda = "25%"></div>

Código Javascript:

Ver originalvar celdas = document.querySelectorAll("[data-celda]"),
    total = celdas.length;
 
for (var i = 0; i < total; i++)
    celdas[i].style.width = celdas[i].getAttribute("data-celda");

Y lo de la forma data-* para los pseudo-atributos, es algo que la W3C determinó en el estándar HTML5 para la creación de atributos personalizados.

Saludos

quico5 · #5 (**permalink**) 14/07/2014, 15:33

Genial Alexis88 !!

Aunque parece que no me ha salido

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		var celdas = document.querySelectorAll("[data-celda]"),
		total = celdas.length;

		for (var i = 0; i < total; i++)
		celdas[i].style.width = celdas[i].getAttribute("[data-celda]");
	</script>
	<style>
		[data-fila] {display:table; margin:0 auto; width:100%;}
		[data-borde] {border-collapse:collapse;}
		[data-borde]>[data-celda] {border:.2em solid black;}
		[data-celda] {display:table-cell; vertical-align:top; padding:0 10px;}
		[data-celda]{background: green; height: 5em; margin-bottom: .5em;}
	</style>
</head>
<body>
	<div data-fila="960px" data-borde>
		<div data-celda="30%"></div>
		<div data-celda="70%"></div>
	</div>
</body>
</html>

Alexis88 · #6 (**permalink**) 14/07/2014, 16:16

Esto lo habré dicho unas 345234534 veces, pero parece que muy pocos lo han leído. Coloca el código JS justo antes de la etiqueta </body> para que pueda surtir efecto. Sucede que el código carga de arriba hacia abajo, entonces, del modo en que lo tienes, primero carga el código JS y luego los elementos restantes del DOM, por lo tanto, el código JS no afectaría a ninguno de ellos pues cuando éste cargó, dichos elementos aún no existían. Si colocas el código JS en el lugar que te indiqué, éste cargará luego de haber cargado los elementos, entonces, sí los afectará.

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
<head>
    <meta charset = "utf-8" />
    <title>Título</title>
</head>
<body>
    <!-- Contenido del documento -->
    <script type = "text/javascript">
        //Código JavaScript
    </script>
</body>
</html>

Saludos

quico5 · #7 (**permalink**) 24/07/2014, 08:36

Eso no lo sabia

, tenia entendido que era simplemente para priorizar orden de carga

sigue sin ir, ni con % ni con px

Código:

Uncaught TypeError: Cannot read property 'style' of undefined (index):98
(anonymous function)

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Título</title>
	<style>
		[data-fila] {display:table; margin:0 auto; width:100%;}
		[data-borde] {border-collapse:collapse;}
		[data-borde]>[data-celda] {border:.2em solid black;}
		[data-celda] {display:table-cell; vertical-align:top; padding:0 10px;}
		[data-celda]{background: green; height: 5em; margin-bottom: .5em;}
	</style>
</head>
<body>
	<div data-fila="960px" data-borde>
		<div data-celda="30%"></div>
		<div data-celda="70%"></div>
	</div>
	<script>
		var celdas = document.querySelectorAll("[data-celda]"),
		total = celdas.length;

		for (var i = 0; i < total; i++)
		celdas[i].style.width = celdas[i].getAttribute("[data-celda]");
	</script>
</body>
</html>

Alexis88 · #8 (**permalink**) 24/07/2014, 12:51

¿Te has fijado bien en cómo tomo al pseudo-atributo al momento de asignar el valor del ancho? Sin corchetes []. Así como lo tienes, no lo tomará pues no existe el pseudo-atributo [data-celda] sino el data-celda. Te sugiero crear un margen entre cada elemento para que no salgan juntos.

Saludos

quico5 · #9 (**permalink**) 24/07/2014, 14:28

Gracias Alexis88 por las correcciones

La razón de poner los corchetes es que tengo ajustado CSS mediante JQUERY, y comprobaba que podía hacerlo de manera similar, pero veo que no es el caso

Respecto a los margenes, me llama la atención que se usen tanto, desconozco el motivo, mi idea es poder generar columnas dinámicas y después según diseño aplicar margin o padding, de todas formas aunque se me de bien el CSS no estoy libre de malas practicas y me pregunto si mi criterio de los margenes puede ser erroneo o aceptable según en que casos se este empleando

Alexis88 · #10 (**permalink**) 24/07/2014, 15:43

Con el valor table-cell aplicado a la propiedad display vas a lograr el efecto que esperas, pero los elementos se visualizarán unos juntos a otros, sin un espacio en medio, por eso te aconsejé lo de aplicar un margen entre cada elemento, por lo demás, todo bien.

Saludos