Utilisez javascript pour obtenir le style d'un élément à partir d'un fichier CSS externe

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" media="all" href="style.css"> 
    </head> 

    <body> 
     <div id="test">Testing</div> 

     <script> 
      alert(document.getElementById('test').style.display); 
     </script> 
    </body> 
</html>

Le style.css:

div { 
    display:none; 
}

Je pense que le js retourneraient " none ", mais retourne une chaîne vide à la place. Y a-t-il un moyen de résoudre ce problème?

Source

2010-04-01 Alan

Cela fonctionnerait pour les navigateurs conformes aux normes (et non IE - currentStyle/runtimeStyle).

<body> 
    <div id="test">Testing</div> 

    <script type="text/javascript"> 
     window.onload = function() { 
      alert(window.getComputedStyle(document.getElementById('test'),null).getPropertyValue('display')); 
     } 
    </script> 
</body>

Source

2010-04-01 04:13:11 Jonathan

Charger une bibliothèque 150kb pour faire quelque chose qui est un 1-ligne dans JS vanille? Es-tu sérieux? –

Merci. Cependant, notre page sera utilisée sur mobile et nous devons minimiser la taille de la page. Par conséquent, jquery n'est pas recommandé. Y a-t-il un autre moyen de parvenir au même résultat? – Alan

Peut-être mérite d'être mentionné dans la question. Des mobiles particuliers? Beaucoup ne supportent pas JS du tout. – Jonathan

Puisque l'affichage n'est pas défini directement en tant que propriété de style, vous ne l'obtiendrez pas en utilisant le code ci-dessus. Vous devez obtenir la valeur calculée.

Vous pouvez consulter cette page, Get styles

Pour obtenir la valeur

var displayValue = getStyle("test", "display"); 

function getStyle(el,styleProp) 
{ 
    var x = document.getElementById(el); 
    if (x.currentStyle) 
     var y = x.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
     var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    return y; 
}

Source

2010-04-01 04:09:50 rahul

Merci. Mais comment pourrais-je obtenir la valeur calculée? – Alan

Édité ma réponse. – rahul

Cette fonction est vraiment basique, elle aura des problèmes avec les noms de propriété CSS formés par deux ou plusieurs mots (ie, font-size, background-color, etc) et aussi la méthode getComputedStyle devrait être appelée depuis la ' objet document.defaultView', car tous les navigateurs n'ont pas les membres 'defaultView' disponibles sur l'objet global (' window'), et il y a plus d'incohérences, jetez un oeil à cette implémentation que j'ai faite: http://stackoverflow.com/questions/2531737/javascript-incapable-d'-obtenir-éléments-max-hauteur-via-élément-style-maxheight/2531934 # 2531934 – CMS

Le CSS ne sera pas encore chargé. Enveloppez votre JavaScript dans un événement "prêt à l'emploi".

<body onload="alert(document.getElementById('test').style.display);">

Est-ce que ce travail pour vous?

Source

2010-04-01 04:10:57

Merci. Y a-t-il un exemple? – Alan

ne fonctionne pas = [ – Alan

Utilisez javascript pour obtenir le style d'un élément à partir d'un fichier CSS externe

Répondre

Questions connexes