[SOLUCIONADO] Cambiar el backgroundColor del body.

Pelydas · #1 (**permalink**) 12/10/2014, 10:35

Hola, desde una ventana abro otra ventana y usando DOM aplico un color de fondo al <body> de la nueva ventana, el código es algo como esto:

window.onload=function() {
var actionfrm = document.getElementById("frmVentana").setAttribute ("action","javascript:nuevaVentana()");
}
function nuevaVentana() {
......
var color = document.getElementById("txtColor").value;
......
var nuevaventana = "<!DOCTYPE HTML><html><head><title>"+nombre+"</title>";
......
ventana = window.open("", nombre, atributos);
ventana.window.status = "true";
ventana.document.open();
ventana.document.writeln(nuevaventana);
ventana.document.body.style.backgroundColor=color; //OJO AQUI //
ventana.document.close();
}
y va bien, pero antes de usar la instruccion "ventana.document.body.style.backgroundColor=color ;" pase por probar con variantes como:

ventana.document.body.setAttibute("style").backgro undColor=color; ó
var v = ventana.document.body.getAttibute("style");
v.backgroundColor=color; etc

y no me funcionaba, parece que tengo algun error de concepto. Al final si va con una ¿ porque insistir con otras ?, pues aprender bien a trabajar con DOM. ¿ Me explican porque las otras variantes no me funcionaban ?. Gracias y saludos a todos.

zerokilled · #2 (**permalink**) 12/10/2014, 11:21

buenas,
no te funciona con las demás variantes, esencialmente porque cada propiedad representa una parte distinta del API de DOM. la propiedad style de cualquier elemento representa un objeto CSSStyleDeclaration y ésta contiene la serie de propiedades de CSS. por contraste, element.getAttribute devuelve un string que lee directamente del código html. mas o menos, lo mismo hace element.setAttribute, crea una entrada en el mapa de atributos del elemento. en algunos navegadores, esto suele crear algún efecto pero en otros no. en esos casos, debe ser porque setAttribute no está directamente vinculado con la parte del DOM que se ha intentado modificar.

quimfv · #3 (**permalink**) 12/10/2014, 11:34

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<div id="unDiv" style="position:absolute;z-index:0;text-align:right; width:100%">

si tienes esto y haces

Código Javascript:

Ver originaldocument.getElementById("unDiv").setAttribute("style","background-color: blue;");

funcionará pero pasara a

Código HTML:

Ver original<div id="unDiv" style="background-color: blue;">

con lo que quizas pierdes algo. En cambio si haces

Código Javascript:

Ver originaldocument.getElementById("unDiv").style.backgroundColor="blue";

ahora será

Código HTML:

Ver original<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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
 function cambiaColor1(){
    document.body.style.backgroundColor="red";
 }
 function cambiaColor2(){
    document.body.setAttribute("style","background-color: blue;");
 }
 function cambiaColor3(){
    var v = document.body.getAttribute("style");
        alert(v);
        if(v!="background-color: green;"){
                v="background-color: green;";
            }else{
                v="background-color: yellow;";
                }
        document.body.setAttribute("style",v);
 }
</script>
</head>
<body>
<input name="bot1" type="button" id="bot1" onClick="cambiaColor1();" value="document.body.style.backgroundColor" />
<br />
<input name="bot2" type="button" id="bot2" onClick="cambiaColor2();" value="setAttribute" />
<br />
<input name="bot3" type="button" id="bot3" onClick="cambiaColor3();" value="getAttribute+alert+setAttribute" />
</body>
</html>

(en FIREFOX funciona)

Edito: @zerokilled sabe más que yo y es mas rapido, por suerte no nos contradecimos del todo.

Pelydas · #4 (**permalink**) 12/10/2014, 12:40

Muchas gracias a zerokilled y quimfv, vuestras respuestas han sido muy claras, creo que he aprendido un poquito mas acerca de DOM. Saludos.