aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace unos días me ví involucrado en una conversación sobre el uso de clases para definir estilos frente a definir los estilos directamente en el elemento. Quitando todas las obviedades sobre la comodidad de disponer de una clase y con todos los estilos necesarios para darle un aspecto diferente a esos elementos.

La conversación venía, ¿por si era mejor cambiar los estilos directamente mediante DOM, atacando a los atributos de style directamente o cambiando el className del elemento y dejar que el navegador sea el que asocie esa nueva class a los estilos recorriendolos y aplicándolo?

Pues trás 5 minutos de charla y 30 segundos de Google llegamos al gran Quirksmode, y evidentemente, como otras tantas veces, nos sacó de dudas con una de sus espectaculares tablas comparativas.

Funciones usadas

// Cambiar styles
function doChangeStyle()
{
	startTimer();
	var x = pointer.getElementsByTagName('td');
	for (var i=0;i<x.length;i++)
	{
		x[i].style.backgroundColor = '#00cc00';
		x[i].style.fontSize = '120%';
	}
	stopTime = new Date().getTime();
	setTimeout('stopTimer(2)',10);
}

// Cambiar className
function doChangeClassName()
{
	startTimer();
	var x = pointer.getElementsByTagName('td');
	for (var i=0;i<x.length;i++)
	{
		x[i].className = 'teststyle';
	}
	stopTime = new Date().getTime();
	setTimeout('stopTimer(1)',10);
}

El artículo, nos permite realizar una prueba creando una tabla y cambiandole los estilos a todos los elementos <td />.

Conclusiones

Pues la opción que no más usamos y que por un momento creí que podría ser la menos apropiada, className se comporta realmente rápida en todos los navegadores testeados excepto en Opera 9.5b que sería mejor usar el método style.

Compártelo