visualizar un atributo de un estilo

xcorpyon · #1 (**permalink**) 17/06/2004, 16:53

Hola.
Bueno, voy a pastear un código de ejemplo que no termino de entender por qué no funciona (en realidad hará lo que debe, pero no lo asimilo

):

Código:

<html>
<head>
<style>
.mi_estilo {
	position:absolute;
	width:100px;
	height:160px;
	left:500px;
	top:100px;
	background:#008800;
}
</style>
</head>
<body>
<script>
	var mi_objeto;

	function mi_funcion(obj) {
		mi_objeto=obj;
		alert(mi_objeto.style.left);
		mi_objeto.style.left=10;
		alert(mi_objeto.style.left);
	}
</script>
<div id="mi_id" onclick="mi_funcion(this);" class="mi_estilo"> </div>
</body>
</html>

Pues como veis lo único que tengo es definido un estilo, y una capa con dicho estilo, pero cuando trato de acceder (por la funcion al clicar en el <div>) directamente al atributo no puedo, pero si puedo despues de asignarle un valor (y eso que el valor ya estaba definido anteriormente en el <style>...

- Je Je Je, creo q el código se explica mejor que yo, asi q... os lo dejo en vuestras manos, a ver qué me podéis decir...

JavierB · #2 (**permalink**) 18/06/2004, 03:18

Hola, xcorpyon.

La única posibilidad, que yo sepa, de acceder a los estilos de un objeto es definiendolos en la propia etiqueta html:

<div style="left:20px; top:40px">

Si lo que quieres es saber la posición puedes usar:

mi_objeto.offsetLeft;
mi_objeto.offsetTop;

Espero que te sirva. Saludos,

xcorpyon · #3 (**permalink**) 18/06/2004, 10:24

Hola JavierB,

gracias por tu consejo, pero ya sabía acceder a un atributo de un objeto cuando el objeto contiene su propio estilo (además no solo quiero acceder al atributo left sino a muchos más...

)

Y te digo que sigo con el mismo problema porque quería organizar mejor el código de la página (separar el diseño HTML del estilo CSS para tener un codigo sencillo y legible) poniendo todos las hojas de estilos en un fichero aparte (*.css).

Por esto, si alguien sabe acceder al atributo de la forma que yo quiero, que no dude en postearlo aki.

Muchas gracias

furoya · #4 (**permalink**) 25/06/2004, 12:53

Hola xcorpyon , JavierB :

xcorpyon : no termino de entender la conexión entre leer el estilo de un elemento y emprolijar hojas de estilo del documento.
Se me ocurrió que quizá tengas una página hecha con algún editor de esos que agregan estilos "por las dudas" y quieras confirmar si hay aplicada una clase (p.e.) .FOOT{} -aunque no hayas puesto ningún pie de página- para saber si puedes eliminarla o debes pasarla a tu archivo CSS. Pero con listar el total de los atributos CLASS es suficiente, vas copiando uno por uno desde STYLE y los que sobran, no sirven.

Aún así, si tienes un IE5+ a mano, abre este código. Debe haber una docena de formas de hacer el truco (porque es un truco, como ya dijo JavierB , no se puede extraer un estilo de un objeto si está aplicado con CLASS), y ésta es solamente una.

Código:

<html>
<head>
<style>
.mi_estilo {
	position:absolute;
	width:100px;
	height:160px;
	left:500px;
	top:100px;
	background:#008800;
}
</style>
</head>
<body>
<script>
	var mi_objeto, clase_obj, estilo_doc, texto_clase;

	function mi_funcion(obj) {
		mi_objeto=obj;
		clase_obj=obj.className;
		estilo_doc=document.styleSheets[0].cssText;
		Todo=estilo_doc.length;
		Comienzo=estilo_doc.indexOf(clase_obj)-1;
		Fin=estilo_doc.substring(Comienzo,Todo).indexOf("}")+1;
		estilo_objeto=estilo_doc.substring(Comienzo,Fin);
		alert(estilo_objeto);
			}
</script>
<div id="mi_id" onclick="mi_funcion(this);" class="mi_estilo"> </div>
</body>
</html>

saludos

furoya

xcorpyon · #5 (**permalink**) 29/06/2004, 17:57

Gracias furoya por responderme con ese peazo de codigo.

La verdad esq si, es un gran apaño, pero al menos me sirve para saber que de verdad no hay forma de hacer lo que quiero directamente.

gracias.

caricatos · #6 (**permalink**) 30/06/2004, 01:57

Hola a todos:

Lamentablemente siempre hay que ver los resultados dependiendo de los navegadores... con explorer se puede saber los estilos pre-asignados por defecto y los que se asignan en la página mediante currentStyle y runtimeStyle...

En esta página que mostré hace tiempo: http://localhost/www.pepemolina.com/...stripador.html se pueden ver que la lista de "runtimeStyle"s están sin asignación y los "currentStyle" tienen algo...

Desde el listado de hijos hay que ir al body y desde ahí se pueden ver ambos objetos

Saludos

furoya · #7 (**permalink**) 30/06/2004, 16:33

Hola de nuevo :

xcorpyon : me alegra que uses el Notepad, yo hacía lo mismo; pero ahora lo cambié por otro que tiene "Buscar y reemplazar" y "Número de línea" ( es más práctico ).
Lo mío es puro prejuicio. No está mal copiar y pegar o usar esos editores HTML lamentables, siempre que alguna vez nos tomemos el trabajo de mirar el código de la página para tratar de entender cómo funciona.
Éste busca el nombre de la clase del elemento y compara el texto dentro de los estilos como si fueran un string; luego busca el final de los atributos ( que es un "}" ) y los usa como comienzo y final de un substring de los estilos. Por supuesto que no siempre coinciden y habrá que sumar o restar algún caracter.

caricatos : tú siempre humillando ...

Eso es impresionante. Creo que vi una versión DOM anterior o posterior, pero como de costumbre la perdí de vista y no la volví a encontrar.
Para desquitarme, hago una corrección , la ruta es http://www.pepemolina.com/DOM/destripador.html , se te coló un "localhost".
Otra vez

saludos

furoya

caricatos · #8 (**permalink**) 30/06/2004, 18:20

Cita:

Iniciado por furoya

Hola de nuevo :

caricatos :
...

Eso es impresionante. Creo que vi una versión DOM anterior o posterior, pero como de costumbre la perdí de vista y no la volví a encontrar.
Para desquitarme, hago una corrección , la ruta es http://www.pepemolina.com/DOM/destripador.html , se te coló un "localhost".
Otra vez

saludos

furoya

Muchísimas gracias por la corrección...
No es la primera vez que me ocurre y seguro que no será la última...

... esta claro que localhost es mi PC... y me parece que tengo un buen sistema "localhost" ya que se corrijen mis fallos con facilidad ¿?

Si lo de las "versiones" es una página mía, seguro que te refieres al index de la misma dirección: http://www.pepemolina.com/DOM/ aunque en este caso la página es "inspector" (tonterias... )

Saludos

furoya · #9 (**permalink**) 12/07/2004, 08:48

Exactamente. Era esa.

Gracias.