Côté client, une feuille de style est déjà un objet ; elle est analysée dans un arbre lors du chargement de la page.
Supposons que vous ayez une page HTML commençant par
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://stackoverflow.com/styles/global.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="http://stackoverflow.com/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="http://stackoverflow.com/styles/banner.css" rel="stylesheet" type="text/css" media="screen"/>
y global.css contient les lignes
#page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; }
#header { background-color: transparent; }
#main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;}
#sidebar { margin-right: 12px; }
Ensuite, afin de trouver ce qui est prévu pour les background-color de #page vous devez écrire document.styleSheets[0].cssRules[0].style.backgroundColor qui renverrait #fff (ou rgb(255, 255, 255) sur certains navigateurs, je crois).
D'autres éléments utiles sont à prendre en compte dans les fiches susmentionnées :
document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }"
document.styleSheets[0].cssRules[2].selectorText //"#main"
Si vous aviez un sélecteur plus complexe, comme #main div.header a, #main div.header a:visited alors la propriété textuelle du sélecteur renvoie l'intégralité du texte, et pas seulement la première partie.
Votre question spécifique est "Comment puis-je savoir ce qui est défini dans la feuille de style pour un sélecteur donné". Voici une façon de l'approcher :
function findProperty(selector) {
rules = document.styleSheets[0].cssRules
for(i in rules) {
if(rules[i].selectorText==selector) return rules[i].cssText;
}
return false;
}
findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }"
Le fait est que l'arbre CSS auquel vous avez accès de cette manière a déjà été analysé par le navigateur (d'où le terme "approximatif" ci-dessus). Si vous êtes dans Firefox, vous ne verrez pas de -webkit parce que Mozilla les laisse tomber. Les différents navigateurs ont également tendance à avoir leur propre façon d'afficher les couleurs (comme ci-dessus ; si votre fichier .css actuel a une couleur donnée fixée à #fff et que vous le vérifiez en JavaScript après qu'il ait été analysé, vous pourriez obtenir le résultat suivant #fff , #ffffff o rgb(255, 255, 255) ).
Si vous voulez savoir quels caractères ascii spécifiques étaient contenus dans le fichier .css initial, le seul moyen fiable est de consulter le fichier lui-même, AFAIK.
Une référence pour l'objet feuille de style est disponible aquí .
