affichage element.style informations incorrectes

Il y a un simple html et javascript code:affichage element.style informations incorrectes

<html> 
    <head> 
     <style>p { height: 100px;} </style> 
     <script> 
      window.onload = function(){ 
       var p = document.getElementsByTagName("p")[0]; 
       alert("actual height is " + p.style.height); 
      }; 
     </script> 
     <title>JavaScript Tests</title> 
    </head> 
    <body> 
     <p> 
      100px height p element 
     </p> 
    </body> 
</html>

Mais quand nous courons la hauteur réelle est égale à une chaîne vide.
Pourriez-vous expliquer pourquoi?
Merci.

Source

2010-12-08 Kai

La style propriété est différent du style actuel en CSS: Il semble pour l'attribut style, donc ceci:

<p style="height: 100px"></p> 
<script>alert(document.getElementsByTagName("p")[0].style.height);</script>

sera "100px".

Pour obtenir sa hauteur réelle, utilisez getComputedStyle().

<style> p { height: 100px; }</style> 
<p></p> 
<script>alert(getComputedStyle(document.getElementsByTagName("p")[0]).getPropertyValue("height"));</script>

Source

2010-12-08 06:24:13

Notez que 'getComputedStyle()' n'est pas bien supporté dans toutes les versions populaires d'IE. – cdhowie

En effet. Vous pouvez utiliser 'elem.currentStyle.height' à la place dans IE. –

La propriété style renvoie aux attributs de style définis explicitement sur l'élément, et non styles hérités des déclarations CSS.

Par exemple, essayez ceci:

<p style="height: 100px;">

Ensuite, vous verrez une valeur. Voir this document pour une approche qui combinera toutes les différentes parties de l'information de style ensemble pour récupérer le style composite réel d'un élément.

Source

2010-12-08 06:23:57 cdhowie

affichage element.style informations incorrectes

Répondre

Questions connexes