Interpretar una clase CSS por medio de Javascript

el_javi · #1 (**permalink**) 17/11/2005, 17:01

Hola a tod@s.

Nuevamente coloco un post con una pregunta que podemos considerar.. "la mar de extraña".

Necesito poder recorrer la/s hoja/s de estilos de mi página HTML.

En un principio, eso no es problema, dado que está dentro del objeto document.styleSheets, y puedo recorrerla con un for(hojaEstilo in document.styleSheets).

El tema es que a mi función de recorrerla, quiero pasarle un className, y que me devuelva un objeto de tipo style con toda la configuración del className.

La finalidad es la sigueinte:

Tengo una caja de texto en mi página, que tiene una clase (ej: .classInput{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 9px;text-decoration:underline;color: #000000;line-height:11px;font-weight:bold}).
Por Javascript, tengo que recorrer las hojas de estilo y encontrar esa clase.
Despues de tenerla localizada, he de crear al lado de la caja de texto inicial, otra identicamente igual, pero que el esté configurada mediante un style (no mediante class).

No se si me habré explicado bien.. espero que si...

Si alguno puede ayudarme, se lo agradezco.

Un saludo y gracias de antemano

furoya · #2 (**permalink**) 17/11/2005, 18:10

Hola el_javi :

Hay maneras mejores, pero ...

visualizar un atributo de un estilo

caricatos · #3 (**permalink**) 17/11/2005, 19:22

Hola:

Seguro que puedes recorrer las hojas de estilo con ese bucle for...

No sé si conoces una página que llamo "destripador" y que recorre los objetos de una ventana/página con ese bucle asociativo: http://localhost/www.pepemolina.com/...stripador.html

He mirado los atributos que devuelve el objeto document.styleSheets (con el índice 0 por ejemplo... donde pone destripar otro objeto), y no veo ningún estilo definido... en explorer se puede saber los estilos activos de cada tag con currentStyle, pero no es estándar...

Saludos

el_javi · #4 (**permalink**) 18/11/2005, 04:01

Hola a tod@s....

Tras el post que puse ayer.. logré solucionarlo de una forma bastante "pofessional".

A continuación pongo el codigo que usé para ello:

Código:

	var theRules = new Array();
	var laClaseQueBusco = "claseInput";
	if (document.styleSheets[1].cssRules) // Comprobación de reglas de Estilos en Firefox
	{
		theRules = document.styleSheets[1].cssRules
	}
	else
	{
		if (document.styleSheets[1].rules) // Comprobación de reglas de Estilos en Internet Explorer
		{
			theRules = document.styleSheets[1].rules
		}
	}

	for(elem in theRules) // Recorro las reglas de estilos CSS
	{
		if(typeof theRules[elem] == "object") // si el elemento que estoy recorriendo es un Objeto..
		{
			for(elem2 in theRules[elem]) // Recorro el objeto
			{
				if(theRules[elem].selectorText == "." + laClaseQueBusco) // Si la clase que estoy recorriendo es la que deseo buscar... 
				{
					if(elem2 == "style") // Si dentro de la clase estoy en el objeto STYLE
					{
						foundedClass = true;
						theStyle = theRules[elem][elem2];
					}
				}
			}
		}
	}

	alert("Familia = " + theStyle.fontFamily + "\nTamaño de letra = " + theStyle.fontSize + "\nColor de Fuente = " + theStyle.color)

En la variable theStyle tengo ya el Estilo del elemento que deseo.

Ahora puedo trabajar con ello de la manera que quiera

Espero que a vosotros también os pueda ser util.

Muchas gracias y un saludo

kepawe · #5 (**permalink**) 18/11/2005, 09:56

Hola el_javi, furoya y caricatos.

Existe un método nativo para poder obtener el valor de los atributos de clase, getPropertyValue, para Mozilla, Firefox y Opera 8, aunque creo que alguna de las ultimas versiones de Opera 7 ya lo soportaba, para que puedas ver información sobre Opera te pongo este enlace, por otra parte Opera no soporta styleSheets.

Te pongo un ejemplo de como utilizar getPropertyValue:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 
<html>

<head>

<title>Estilos</title>

</head>

<style type="text/css">

<!--

div {

position:absolute;

background-color:red;

}

div.clase1{

top:100px;

left:10px;

}

div.clase2{

position:relative;

top:0px;

left:0p;

width:200px;

}

-->

</style>

<script language="JavaScript" type="text/javascript">

<!--

function current_style(obj,atr){

           

        if (document.defaultView && document.defaultView.getComputedStyle && document.body) {

                /* para atributos de estilo de varias palabras Mozilla y Opera, no sigue las  mismas reglas de eliminar el guión y poner en mayúscula  la primera letra de las palabra que precede al guión, por ejemplo:

                * border-top-color en IE sería borderTopColor, mientras que Mozilla y Opera8 se mantiene igual*/

             atr = atr.replace(/([A-Z])/g,"-$1").toLowerCase();

             return document.defaultView.getComputedStyle(obj ,null ).getPropertyValue(atr );

        }

        else if (document.body && document.body.currentStyle) {

            return obj.currentStyle[atr];

        }

    }

//-->

</script>

 
<body>

<div id="n1" class="clase1" onclick="alert(current_style(this,'borderTopColor'))" > CLASE1</div>

<div id="n2" class="clase2" onclick="alert(current_style(this,'width'))" > CLASE2</div>

</body>

</html>

Por otra parte, en Opera y Mozilla te devuelve el valor width y height de un elemento aunque este no este definido por nosotros, pero IE devuelve auto si no esta definido por nosotros, es una pena, ya que sería muy útil.
Hay otras diferencias, por ejemplo el color, si no está definido por nosotros opera e IE devolverá un valor hexadecimal y mozilla en formato rgb, aunque esto tiene solución.

Saludos

el_javi · #6 (**permalink**) 19/11/2005, 04:16

Hola a tod@s.

Gracias por la dedicación que le estais dando a mi pregunta

.

kepawe: La contestación que has dado, me parece muy optima para que sea algo multiplataforma, pero hay un detalle, que me gustaría ver si puedes ayudarme:

En el ejemplo que has puesto, a la función le pasas como parámetro el objeto como referencia y el atributo que quieres obtener, con el fin de que te retorne el valor que toma en el objeto, el parámetro pasado.

En mi caso, necesito pasarle el objeto de referencia y que me retorne la clase que tiene aplicada, pero como un objeto estilo.

Espero que puedas ayudarme.

Muchas gracias de antemano.

Un saludo.

furoya · #7 (**permalink**) 24/11/2005, 11:22

hola de nuevo :

caricatos : una aclaración, que me parece que es innecesaria, pero ya que estoy acá la hago.
Cuando dije

Cita:

...Hay maneras mejores, pero...

me refería, claro, a mi ejemplo. Ya que en el mismo tema está un enlace a tu "destripador" por el cual he expresado mi admiración.

kepawe : muy buena la página con las compatibilidades de Opera. Allí uno entiende por qué es un navegador tan 'duro' para los efectos y las 'fantasías'. Pero está bien, al final que fue pensado para navegar rápido y seguro, y generalmente lo usa quien busca información y lo último que quiere ver es pirotecnia.
Hace poco puse un ejemplo de currentStyle para leer la fuente asignada en CSS con un favlet, ahora puede que haga un bookmarklet y hasta quizás un "hotlistlet" basándome en tu ejemplo.

¿Como averiguar el tipo de fuente de una pagina web?

saludos