El problema radica en que no consigo que javascript lea los estilos que tiene el elemento al cargar la pagina (parece ser que es porque se cargan en un archivo aparte y no con el atributo style con el que no da problemas). ¿Como puedo hacer para que javascript lea los estilos del elemento estando estos en un archivos CSS externo al HTML?
Gracias a todos por las molestias^^
Dejo los codigos a continuacion:
Código HTML:
Ver original
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="estilos.css" type="text/css" rel="stylesheet" media="screen" /> </head> <body> <div id="contenedor"> <div id="cajaTexto"> <p>Esto es un ejemplo para modificar el color y tamaño de esta caja que contiene al texto cuando se haga click sobre ella, se cambiará lo siguiente: </p> <ul> </ul> </div> </div> </body> <html>
Código CSS:
Ver original
body{ font:.8em arial, san-serif; } div div p{ text-indent:3em; margin:0; padding:10px; } #contenedor{ width:500px; margin:50px auto; } #cajaTexto{ margin:0 auto; border:20px solid #E66; background:#FDD; width:460px; }
Código Javascript:
Ver original
function cambiarCaja(){ alert(cajaTexto) //Este alert me indica que si obtiene el elemento a modificar alert(cajaTexto.style.width); // Pero ya en este alert no me muestra nada en pantalla if (cajaTexto.style.width=="460px"){ cajaTexto.style.width="300px"; cajaTexto.style.border="10px double #6E6" cajaTexto.style.backgroundColor="#DFD"; }else{ cajaTexto.style.width="460px"; cajaTexto.style.border="20px solid #E66"; cajaTexto.style.backgroundColor="#FDD"; } } window.onload=function(){ cajaTexto=document.getElementById("cajaTexto"); cajaTexto.onclick=cambiarCaja; }