2011-07-14 16 views

Respuesta

6

métodos DOM como document.getElementById() crean objetos que apuntan a, y contienen ciertos detalles sobre- un HTMLElement o conjunto de elementos especificados.

Lamentablemente, la propiedad .style solo conoce las propiedades de estilo establecidas con esa misma característica. En el siguiente ejemplo, al hacer clic en what color? no funcionará hasta que haga clic en change color.

<html> 
<head> 
<script> 
function whatColor() { 
    var d = document.getElementById('ddd'); 
    alert(d.style.backgroundColor); 
} 
function changeColor() { 
    var d = document.getElementById('ddd'); 
    d.style.backgroundColor='orange'; 
} 
</script> 
<style> 
#ddd { 
    background-color:gray; 
} 
</style> 
</head> 
<body> 
<input type="button" onclick="whatColor();" value="what color?" /> 
<input type="button" onclick="changeColor();" value="change color" /> 
<div id="ddd">&nbsp;</div> 
</body> 
</html> 

recomiendo la lectura de gran página del PKK en getComputedStyle y currentStyle (es decir, por supuesto, es diferente) http://www.quirksmode.org/dom/getstyles.html

Al final del tutorial, hay una función muy decente para sus propósitos, aunque los marcos tales como jQuery proporcionan funciones muy prácticas & potentes para el diseño de elementos de página: http://api.jquery.com/css/

+0

Gracias por dejar en claro que el estilo .style solo conoce los que estableció. Creo que lo jquery era lo que estaba buscando. – ShrimpCrackers

1

muestra el valor que se configuró dinámicamente. si quiere encontrar el valor actual, necesita el valor calculado. Se hizo la misma pregunta, lee mi respuesta aquí

Stackoverflow

+0

Si se da un estilo en una hoja de estilo externa, ¿eso no anula el valor predeterminado? Definí la visualización en una hoja de CSS externa para el elemento que estoy pasando, pero se muestra como indefinido. – ShrimpCrackers

+0

lo que quiero decir con eso es, leerá una propiedad que se establece con javascsript. para obtener el valor establecido de la hoja de estilos, necesita el valor calculado – Ibu

0

Su fragmento sólo mostrará un valor para style.display si realmente se ha establecido, no necesariamente mostrar los valores por defecto.

1

En realidad es posible usando window.getComputedStyle(element[, pseudoElt]).

El método proporciona los valores de todas las propiedades CSS de un elemento después de aplicar las hojas de estilo activas y resolver cualquier cálculo básico que esos valores puedan contener.

Cuestiones relacionadas