Document : propriété styleSheets
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété en lecture seule styleSheets de l'interface Document retourne un tableau StyleSheetList d'objets CSSStyleSheet, pour les feuilles de style explicitement liées ou intégrées dans un document.
Valeur
La liste retournée est ordonnée comme suit :
- Les feuilles de style récupérées à partir des en-têtes
Linksont placées en premier, triées dans l'ordre des en-têtes. - Les feuilles de style récupérées à partir du DOM sont placées après, triées selon l'ordre de l'arbre (angl.).
Exemples
Récupérer une feuille de style spécifique par son titre
function getStyleSheet(uniqueTitle) {
for (const sheet of document.styleSheets) {
if (sheet.title === uniqueTitle) {
return sheet;
}
}
}
Accéder aux règles dans la feuille de style
Vous pouvez accéder à ces feuilles de style et à leurs règles individuellement en utilisant les objets feuille de style, style et CSSRule, comme le montre cet exemple, qui affiche tous les sélecteurs de règles de style dans la console.
for (const styleSheet of document.styleSheets) {
for (const rule of styleSheet.cssRules) {
console.log(`${rule.selectorText}\n`);
}
}
Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :
body {
background-color: darkblue;
}
p {
font-family: "Arial";
font-size: 10pt;
margin-left: 0.125in;
}
#lumpy {
display: none;
}
Ce script affiche ce qui suit :
BODY P #LUMPY
Spécifications
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |