Foros del Web » Programando para Internet » Javascript »

Alterar estilos con javascript q estan en un archivo externo

Estas en el tema de Alterar estilos con javascript q estan en un archivo externo en el foro de Javascript en Foros del Web. Estoy intentando sacar una pagina web en la que el HTML, el CSS y el javascript esten por separado cada cual en su archivo correspondiente. ...
  #1 (permalink)  
Antiguo 07/04/2010, 05:39
 
Fecha de Ingreso: marzo-2008
Mensajes: 26
Antigüedad: 16 años, 8 meses
Puntos: 0
Alterar estilos con javascript q estan en un archivo externo

Estoy intentando sacar una pagina web en la que el HTML, el CSS y el javascript esten por separado cada cual en su archivo correspondiente. El archivo de javascript tiene una serie de funciones para modificar el estilo del HTML según el evento, pero para ello antes tiene que saber que estilo hay y actuar en consecuencia.

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>Ejercicios con DOM y BOM</title>
  6.     <link href="estilos.css" type="text/css" rel="stylesheet" media="screen" />
  7.     <script src="javascript.js" type="text/javascript"></script>
  8. </head>
  9.  
  10. <div id="contenedor">
  11. <noscript>ACTIVA JAVASCRIPT PARA VER LA PAGINA CORRECTAMENTE</noscript>
  12.     <div id="cajaTexto">
  13.         <p>Esto es un ejemplo para modificar el color y tamaño de esta
  14.         caja que contiene al texto cuando se haga click sobre ella,
  15.         se cambiará lo siguiente:
  16.         </p>
  17.         <ul>
  18.             <li>Ancho del borde</li>
  19.             <li>Color del borde</li>
  20.             <li>Ancho de la caja</li>
  21.         </ul>
  22.     </div>
  23. </div>
  24. </body>

Código CSS:
Ver original
  1. body{
  2. font:.8em arial, san-serif;
  3. }
  4.  
  5. div div p{
  6. text-indent:3em;
  7. margin:0;
  8. padding:10px;
  9. }
  10.  
  11. #contenedor{
  12. width:500px;
  13. margin:50px auto;
  14. }
  15.  
  16. #cajaTexto{
  17. margin:0 auto;
  18. border:20px solid #E66;
  19. background:#FDD;
  20. width:460px;
  21. }

Código Javascript:
Ver original
  1. function cambiarCaja(){
  2.     alert(cajaTexto) //Este alert me indica que si obtiene el elemento a modificar
  3.     alert(cajaTexto.style.width); // Pero ya en este alert no me muestra nada en pantalla
  4.    
  5.     if (cajaTexto.style.width=="460px"){
  6.         cajaTexto.style.width="300px";
  7.         cajaTexto.style.border="10px double #6E6"
  8.         cajaTexto.style.backgroundColor="#DFD";
  9.     }else{
  10.         cajaTexto.style.width="460px";
  11.         cajaTexto.style.border="20px solid #E66";
  12.         cajaTexto.style.backgroundColor="#FDD";
  13.     }
  14. }
  15.  
  16. window.onload=function(){
  17.     cajaTexto=document.getElementById("cajaTexto");
  18.     cajaTexto.onclick=cambiarCaja;
  19. }
  #2 (permalink)  
Antiguo 07/04/2010, 07:33
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 10 meses
Puntos: 126
Respuesta: Alterar estilos con javascript q estan en un archivo externo

Hola

Con Dom cambir la id del div cajaTexto, por ejemplo pro cajaTexto2. En el css montas la clase
cajaTexto2

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 10/04/2010, 13:35
 
Fecha de Ingreso: marzo-2008
Mensajes: 26
Antigüedad: 16 años, 8 meses
Puntos: 0
Respuesta: Alterar estilos con javascript q estan en un archivo externo

Okis^^

gracias por tu respuesta Adler, yo habia llegado a otra distinta pero la tuya me gusta mas, es mas limpia y mantiene mejor la separacion entre CSS y javascript.

Etiquetas: alterar, estilos, externo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:17.