40 votes

superluminary avatar

Existe-t-il un moyen de rechercher tous les styles globaux applicables à une page Web?

Demandé el 21 de Novembre, 2017
Quand la question a-t-elle été
744 affichage
Nombre de visites la question a
4 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

En tant que société, nous utilisons des composants (Angulaire, Vue et Réagir) pour la construction de nos applications, mais nous avons encore un bon nombre global de styles que nous avons hérité de notre héritage app.

par exemple:

.active {
  background: red;
}

S'applique à tout élément n'importe où sur la page, qui a une classe d'actif.

Est-il possible, dans le navigateur, pour générer une liste de tous les global (c'est à dire non-préfixée) les règles de style qui s'appliquent à une page, en gardant à l'esprit que ceux-ci pourraient être présents à l'intérieur de bibliothèques de tiers, ou d'autres divers héritage JavaScripts?

Demandé el 21 de Novembre, 2017 par superluminary

Réponses

Trop de publicités?

27voto

pseudosavant avatar
pseudosavant Points 2184

La seule option pour l'évaluation de la page en cours de styles CSS est d'utiliser document.styleSheets. Il sera de retour une liste d' CSSStyleSheets.

Vous aurez envie de se concentrer sur document.styleSheets[n].cssRulesoù n est égal à cette feuille de style que vous souhaitez évaluer. Cela vous donnera une liste de tous les styles appliquées par la feuille de style. Chaque feuille de style aura un cssText et selectorText de la propriété.

Si vous voulez juste faire une boucle pour trouver des styles qui sont "non-préfixée" vous devriez probablement utiliser l' selectorText propriétés.

Voici plus d'informations sur MDN sur document.styleSheets.

Voici un exemple (appuyer sur "Exécuter extrait de code" pour voir les résultats): 

var selectors = [];

var sheets = Array.from(document.styleSheets);

sheets.forEach(function(sheet) {
  // Only Stylesheets from a same-origin domain expose `cssRules` for security reasons
  try {
    var rules = Array.from(sheet.cssRules);
    rules.forEach(function(rule) {
      selectors.push(rule.selectorText);
    });
  } catch (e) {
    // Do something with external stylesheets if you want
  }
});

console.log(selectors);
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Stylesheets</title>
  <style>
    .hello-world {
      background: url(none.gif);
    }
  </style>
  <!-- Won't work as it is not a same-original stylesheet -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <style>
    .foo {
      background: url(none.gif)
    }
    
    .bar {
      background: url(none.gif);
    }
  </style>
</body>

</html>
Répondu el 21 de Novembre, 2017 par pseudosavant (2184 Points )

8voto

evilReiko avatar
evilReiko Points 2048

Je ne suis pas sûr si cela peut vous aider, mais l'essayer. Si vous utilisez google Chrome, essayez ceci:

  1. Inspecter (pour ouvrir les outils de développement) > Audits (onglet) > Sélectionnez "Audit Stade" > Cliquez sur "Exécuter"

enter image description here

  1. Chrome affiche tous les règles CSS.

enter image description here

EDIT:

Aussi la peine d'essayer: Inspecter (pour ouvrir les outils de développement) > cliquez sur les 3 points verticaux à côté de "Console" de l'onglet > Couverture.

Il affiche la liste des fichiers CSS/JS chargé, et il permettra de repérer les lignes sont utilisées (en vert) et non utilisés (rouge). Lire Plus

enter image description here

Répondu el 29 de Novembre, 2017 par evilReiko (2048 Points )

3voto

Znaneswar avatar
Znaneswar Points 2244

Essayer ce script pour obtenir tous les sélecteurs de la forme des feuilles de style internes et externes

for(var i=0; i<document.styleSheets.length; i++) {
   var s = document.styleSheets[i];
   for(var j=0; s.cssRules && j<s.cssRules.length; j++) {
      var c = s.cssRules[j];
      console.log(c.selectorText);
   }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.test{color:red;}
</style>

Pour le final appliquer des propriétés CSS de l'Élément d'essayer quelque chose comme ça avec Javascript

En utilisant getComputedStyle() vous pouvez obtenir exacte calculée finale style appliqué sur l'élément.

L' Window.getComputedStyle() méthode donne les valeurs de toutes les propriétés CSS d'un élément après l'application de l'actif des feuilles de style et le règlement de toute base de calcul de ces valeurs peut contenir.

Le retour de style est un objet CSSStyleDeclaration, qui se met à jour automatiquement lors de l'élément de style est changé.

var elem = document.getElementsByClassName("active")[0];
var background = window.getComputedStyle(elem, null).getPropertyValue("background-color"); 
var color = window.getComputedStyle(elem, null).getPropertyValue("color"); 
console.log(background);
console.log(color);
.active{background-color:blue;color:white;}
<div class="active">
some text
</div>

Ref : https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Répondu el 30 de Novembre, 2017 par Znaneswar (2244 Points )

3voto

Devin avatar
Devin Points 70 
    var rulesArr = [];
    var styles = document.styleSheets;

    for ( i=0; i<styles.length; i++ ){
      //iterate styleSheets.

      if(styles[i].rules){
      //Must be a rule to continue.

        for ( x=0; x<styles[i].rules.length; x++ ){
        //iterate rules, an object in styleSheets.

        rulesArr.push(styles[i].rules[x].selectorText);
        //appends selectorText i.e. css class names to our variable.
        }
      }
    }
    console.log(rulesArr);
Répondu el 30 de Novembre, 2017 par Devin (70 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X