Leer propiedades de una capa CSS con Javascript

dre · #1 (**permalink**) 21/08/2007, 08:39

Hola, llevo unos días haciendo pruebas para manejar capas CSS mediante JavaScript y estoy teniendo problemas. Para asignar valores parece que funciona (por ejemplo, tengo una capa invisible, y cuando ocurre algún evento la hago visible). Pero a la hora de obtener el valor de alguna propiedad tengo problemas, por lo cual por ejemplo mover una capa (lo que supone obtener los valores de posición y modificarlos) me es imposible. Aquí pongo un ejemplo:

Código:

<html>
	<head>
		<title></title>
		<style>
			#p {
				width:200px;
				height:200px;
				background-color:red;
			}
		</style>
		<script>
			function mostrar() {
				document.writeln(document.all["p"].style.width)
			}
		</script>
	</head>
	<body>
		<div id="p" onMouseOver="mostrar()"></div>
	</body>
</html>

Se supone que al pasar el ratón por encima de la capa "p", debería ejecutar "mostrar", que imprime el valor de la propiedad width en el documento. Pero cuando lo ejecuto, no me muestra nada. También he probado usando el método getElementById y pasa igual. ¿Qué estoy haciendo mal?

Por cierto, las pruebas las estoy haciendo con Firefox y Konqueror.

dre · #2 (**permalink**) 22/08/2007, 00:55

Hola, llevo unos días haciendo pruebas para manejar capas CSS mediante JavaScript y estoy teniendo problemas. Para asignar valores parece que funciona (por ejemplo, tengo una capa invisible, y cuando ocurre algún evento la hago visible). Pero a la hora de obtener el valor de alguna propiedad tengo problemas, por lo cual por ejemplo mover una capa (lo que supone obtener los valores de posición y modificarlos) me es imposible. Aquí pongo un ejemplo:

Código:

<html>
	<head>
		<title></title>
		<style>
			#p {
				width:200px;
				height:200px;
				background-color:red;
			}
		</style>
		<script>
			function mostrar() {
				document.writeln(document.all["p"].style.width)
			}
		</script>
	</head>
	<body>
		<div id="p" onMouseOver="mostrar()"></div>
	</body>
</html>

Se supone que al pasar el ratón por encima de la capa "p", debería ejecutar "mostrar", que imprime el valor de la propiedad width en el documento. Pero cuando lo ejecuto, no me muestra nada. También he probado usando el método getElementById y pasa igual. ¿Qué estoy haciendo mal?

Por cierto, las pruebas las estoy haciendo con Firefox y Konqueror.

PatomaS · #3 (**permalink**) 22/08/2007, 03:41

Hola

Recuerda que para poder manipular las propiedades con JavaScript, debes haberlas definido primero en el elemento mediante el atributo style, prueba este ejemplo que te dejo:

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #fff; }
		button {cursor: pointer;}
		#Base { width: 100%; background-color: inherit;}
		#uno {}
		#dos {position: absolute; top: 50px;}
		#tres {position: absolute; background-color: #f00;}
	</style>
	<script type="text/javascript">
		function leerpropiedades(x) {
			alert (document.getElementById(x).style.top);
		}
	</script>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<p id="uno">primer texto</p>
	<p>&nbsp;</p>
	<p id="dos">segundo texto</p>
	<p>&nbsp;</p>
	<p id="tres" style="top: 200px;">tres texto</p>
	<p>&nbsp;</p>
	<form id="formulario" method="post" action="">
		<p><button type="submit" value="uno" onclick="javascript:leerpropiedades(this.value);">presionar para obtener los datos del primer texto</button></p>
		<p><button type="submit" value="dos" onclick="javascript:leerpropiedades(this.value);">presionar para obtener los datos del segundo texto</button></p>
		<p><button type="submit" value="tres" onclick="javascript:leerpropiedades(this.value);">presionar para obtener los datos del tercer texto</button></p>
	</form>
</div>
</body>
</html>

Felicidad

tunait · #4 (**permalink**) 22/08/2007, 04:09

Hola dre

Bueno, lo primerísimo que debo contarte es que el método write() sólo debes usarlo durante la carga del documento y no después. Cuando lo usas cuando el documento está cargado sobre-escribe el contenido total del documento.

Si quieres conocer valores mejor pídeselos en un alert() en vez de con un document.write()

Lo segundo es que si el elemento no tiene asignado el atributo style con las propiedades iniciales el navegador no las ve si están definidas en una hoja de estilos.

Pero puedes acceder a su anchura mediante la propiedad scrollWidth

Código:

function mostrar() {
		alert(document.getElementById("p").scrollWidth)
}

Con eso ya tienes para jugar un rato

saludos

dre · #5 (**permalink**) 22/08/2007, 07:35

Cita:

Iniciado por PatomaS

Hola

Recuerda que para poder manipular las propiedades con JavaScript, debes haberlas definido primero en el elemento mediante el atributo style, prueba este ejemplo que te dejo:

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #fff; }
		button {cursor: pointer;}
		#Base { width: 100%; background-color: inherit;}
		#uno {}
		#dos {position: absolute; top: 50px;}
		#tres {position: absolute; background-color: #f00;}
	</style>
	<script type="text/javascript">
		function leerpropiedades(x) {
			alert (document.getElementById(x).style.top);
		}
	</script>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<p id="uno">primer texto</p>
	<p>&nbsp;</p>
	<p id="dos">segundo texto</p>
	<p>&nbsp;</p>
	<p id="tres" style="top: 200px;">tres texto</p>
	<p>&nbsp;</p>
	<form id="formulario" method="post" action="">
		<p><button type="submit" value="uno" onclick="javascript:leerpropiedades(this.value);">presionar para obtener los datos del primer texto</button></p>
		<p><button type="submit" value="dos" onclick="javascript:leerpropiedades(this.value);">presionar para obtener los datos del segundo texto</button></p>
		<p><button type="submit" value="tres" onclick="javascript:leerpropiedades(this.value);">presionar para obtener los datos del tercer texto</button></p>
	</form>
</div>
</body>
</html>

Felicidad

Ahh, o sea que para poder hacerlo tienes que definir las propiedades a la hora de usar la capa. No tenía ni idea, creía que con hacerlo a la hora de declararla en el bloque style también funcionaba. Y ahora que me fijo, en los ejemplos que había encontrado en Google también es así :P.

Pues muchas gracias, llevaba un par de días dándole vueltas y no caía en cual era el problema. Un saludo.

tunait · #6 (**permalink**) 22/08/2007, 08:46

dre, por favor, no repitas el mismo tema en distintos foros o sólo logras que distintas personas respondan a lo mismo que ya te han contestado en otra parte (como este caso).

Temas unidos