this.style.backgroundImage devuelve string vacío :S

#1 (**permalink**) 07/09/2011, 19:41

Código:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
#top {
	background-color: #84D8E2;
	background-image: url('../img/bgTop.png');
}
</style>

<script>
	window.onload = function() {
		alert( document.getElementById('top').style.backgroundImage );
	}
</script>
</head>

<body>
	<div id="top"></div>
</body>
</html>

Por qué me devuelve una cadena vacía?
Al hacer lo mismo con jQuery: alert( $('#top').css('background-image') ); resulta a la perfección

Panino5001 · #2 (**permalink**) 07/09/2011, 20:37

Eso es porque para obtener un atributo style como estás intentándolo el valor debe establecerse como atributo html style o como propiedad style del objeto DOM.
Para acceder a estilos definidos en un tag style o en una hoja de estilos tenés que acceder a los estilos computados de la página. Lamentablemente Explorer lo hace de manera diferente al resto de los navegadores. Una manera que funciona en todos los navegadores es esta:

Código PHP:

  function t(id){return document.getElementById(id);} 
function css(id,prop){ //id=id del elemento, prop=propiedad css (ejemplo: color)
    if(window.getComputedStyle){ 
        return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(prop);
    }else{ 
        var re = /(-([a-z]){1})/g; 
        if (prop == 'float') prop = 'styleFloat'; 
        if (re.test(prop)) { 
            prop = prop.replace(re, function () { 
                return arguments[2].toUpperCase(); 
            }); 
        } 
        return t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null; 
    } 
}

_cronos2 · #3 (**permalink**) 08/09/2011, 08:39

Cita:

Iniciado por Panino5001

Eso es porque para obtener un atributo style como estás intentándolo el valor debe establecerse como atributo html style o como propiedad style del objeto DOM.
Para acceder a estilos definidos en un tag style o en una hoja de estilos tenés que acceder a los estilos computados de la página. Lamentablemente Explorer lo hace de manera diferente al resto de los navegadores. Una manera que funciona en todos los navegadores es esta:

Código PHP:

  function t(id){return document.getElementById(id);}  
function css(id,prop){ //id=id del elemento, prop=propiedad css (ejemplo: color) 
    if(window.getComputedStyle){  
        return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(prop); 
    }else{  
        var re = /(-([a-z]){1})/g;  
        if (prop == 'float') prop = 'styleFloat';  
        if (re.test(prop)) {  
            prop = prop.replace(re, function () {  
                return arguments[2].toUpperCase();  
            });  
        }  
        return t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null;  
    }  
}

Añadido a lo que dice @Panino5001 (

), tampoco creas que este remedio es la panacea. Hay muchas propiedades como left o margin que si no las declaras, aunque sea en el CSS, devuelven "auto". En este caso, si buscas el backgroud-image se entiende que sí lo has declarado, pero es para que no te asustes después

Saludos (:

#4 (**permalink**) 08/09/2011, 09:18

Muchas gracias a ambos, como siempre que programo en javascript lo hago con jQuery sólamente era llegar y obtener las propiedades, no me manejo mucho con javascript puro. No tenía idea que para poder obtener una propiedad directamente del objeto tenía que estar declarada a nivel de etiqueta, yo pensaba que al hacerlo en una hoja de estilos esas propiedades eran insertadas de inmediato en el DOM en los atributos del objeto correspondiente.

Unas consultas, la expresión regular almacenada en la variable re es para comprobar si el nombre de la propiedad pasada como parámetro es válida?

Otra duda:

Código:

prop.replace(re, function () { 
     return arguments[2].toUpperCase(); 
});

qué parámetro es el argumento número 2 (1 empezando de 0)?

Código:

if (prop == 'float') prop = 'styleFloat';

Esto último es para que se reconozca la propiedad ya que no existe como float si no como styleFloat?

Saludos y muchas gracias de nuevo :P

Panino5001 · #5 (**permalink**) 08/09/2011, 09:57

Podés leer esto para ver cómo funciona el método replace: https://developer.mozilla.org/en/Jav...String/replace
En concreto, en este caso sirve para camelizar el nombre de la propiedad css, que es necesario para el currentStyle de explorer.
Y en efecto, lo que mencionás acerca de float (la mayoría de los navegadores usan cssFloat para estilos asignados, pero explorer requiere styleFloat: http://help.dottoro.com/ljshefgn.php)

#6 (**permalink**) 08/09/2011, 22:02

Ok, muchas gracias, me queda todo claro.
Me dió risa lo del CamelCase, lo de las jorobas :P, pensé que sólo existían toLowerCase() y toUpperCase() y similares en los lenguajes de programación. Ahora sé que existe CamelCase haha.

Saludos a todos! ;)