Ver Mensaje Individual
  #3 (permalink)  
Antiguo 12/10/2014, 11:34
quimfv
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 10 meses
Puntos: 574
Respuesta: Cambiar el backgroundColor del body.

Tu script
Cita:
ventana.document.body.setAttribute("style").backgro undColor=color;
En los manuales vemos que setAttribute() recibe dos parametros, nombre y valor

elementNode.setAttribute(name,value)

El problema de style es que no es un attributo normal, nombre/valor, sino que se podria ver como un array de valores con su nombre.

Código HTML:
Ver original
  1. <div id="unDiv" style="position:absolute;z-index:0;text-align:right; width:100%">

si tienes esto y haces

Código Javascript:
Ver original
  1. document.getElementById("unDiv").setAttribute("style","background-color: blue;");

funcionará pero pasara a

Código HTML:
Ver original
  1. <div id="unDiv" style="background-color: blue;">

con lo que quizas pierdes algo. En cambio si haces

Código Javascript:
Ver original
  1. document.getElementById("unDiv").style.backgroundColor="blue";

ahora será

Código HTML:
Ver original
  1. <div id="unDiv" style="position:absolute;z-index:0;text-align:right; width:100%;background-color: blue;">

mejor, no?



Y la ultima opción que mencionas getAttribute() leemos en el manual

Cita:
Syntax

var attribute = element.getAttribute(attributeName);

where

attribute is a string containing the value of attributeName.
attributeName is the name of the attribute whose value you want to get.
copmo puedes ver el resultado es un string que contiene el valor del atributo solicitado, es una cadena de texto que si la cambias solo haces eso cambiar una cadena de texto.

Que mejor que unos ejemplos

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <script type="text/javascript">
  6.  function cambiaColor1(){
  7.     document.body.style.backgroundColor="red";
  8.  }
  9.  function cambiaColor2(){
  10.     document.body.setAttribute("style","background-color: blue;");
  11.  }
  12.  function cambiaColor3(){
  13.     var v = document.body.getAttribute("style");
  14.         alert(v);
  15.         if(v!="background-color: green;"){
  16.                 v="background-color: green;";
  17.             }else{
  18.                 v="background-color: yellow;";
  19.                 }
  20.         document.body.setAttribute("style",v);
  21.  }
  22. </head>
  23. <input name="bot1" type="button" id="bot1" onClick="cambiaColor1();" value="document.body.style.backgroundColor" />
  24. <br />
  25. <input name="bot2" type="button" id="bot2" onClick="cambiaColor2();" value="setAttribute" />
  26. <br />
  27. <input name="bot3" type="button" id="bot3" onClick="cambiaColor3();" value="getAttribute+alert+setAttribute" />
  28. </body>
  29. </html>

(en FIREFOX funciona)


Edito: @zerokilled sabe más que yo y es mas rapido, por suerte no nos contradecimos del todo.
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.

Última edición por quimfv; 12/10/2014 a las 11:45