en utilisant getElementById pour récupérer les styles en CSS

Pourquoi la première boîte d'alerte est-elle vide, mais la seconde indique 100px? Je me attends la première boîte à dire 300px ..en utilisant getElementById pour récupérer les styles en CSS

<!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>Move</title> 
    <style type="text/css"> 
div#b-ball { 
    position:absolute; 
    top:300px; 
    left:300px; 
} 
</style> 
<script type="text/javascript"> 
<!-- 
function moveBall() { 
alert(document.getElementById("b-ball").style.top); 
document.getElementById("b-ball").style.top="100px"; 
alert(document.getElementById("b-ball").style.top); 
} 
//--> 
</script> 
</head> 
<body onload="moveBall()"> 
    <div id="b-ball"> 
     Basketball image here. 
    </div>  
</body> 
</html>

Source

2009-10-08 Peter Ajtai

La collection de styles contient uniquement les styles appliqués directement à l'élément, et non les styles hérités d'une feuille de style.

Source

2009-10-08 18:56:12 Guffa

Merci Guffa. Rend les choses un peu plus compliquées. –

Cela vous permettra de lire les styles appliqués: http://my.safaribooksonline.com/9780596514082/Ireading_effective_style_sheet_property_values – Guffa

Pourquoi la deuxième boîte dire 300px? Vous venez de définir explicitement le style (qui l'emporte sur la classe) sur 100px. La collection 'style' se réfère uniquement aux styles en ligne et non aux définitions de classe.

Source

2009-10-08 18:55:46 cletus

La deuxième boîte indique 100px. J'ai écrit que je m'attendais à ce que la première case dise 300px .... Je dis pourquoi ça ne tient pas à Guffa. –

en utilisant getElementById pour récupérer les styles en CSS

Répondre

Questions connexes