Comment puis-je récupérer tous les styles css d'un élément ?

Question

Si j'aime un élément d'un site et que je veux l'intégrer à mon site, quel est le moyen le plus simple de le faire ? Il y a parfois beaucoup de fichiers CSS, et il est difficile de les suivre tous.

Answer 1

UPDATE : Comme @tank répond ci-dessous La version 77 de Chrome a ajouté l'option "Copier les styles" lorsque vous cliquez avec le bouton droit de la souris sur un élément dans l'inspecteur Devtools.

---

L'utilisation de Javascript a donné les meilleurs résultats pour moi. Voici comment je l'ai fait :

1. Ouvrez la console DevTools de Chrome.

2. Collez ceci dumpCSSText de la fonction cette réponse de stack overflow dans la console, et tapez Enter :

   function dumpCSSText(element){
     var s = '';
     var o = getComputedStyle(element);
     for(var i = 0; i < o.length; i++){
       s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
     }
     return s;
   }

3. Lorsque vous utilisez Chrome, vous pouvez inspecter un élément et y accéder dans la console avec la commande $0 variable. Chrome dispose également d'une copy commande Utilisez donc cette commande pour copier TOUTES les css de l'élément inspecté :

   copy(dumpCSSText($0));

4. Collez votre CSS où vous voulez !

Answer 2

Ouvrir Firefox , installer Firebug cliquez à droite sur l'élément que vous voulez, choisissez Inspect element et ensuite ouvrir le Computed zone

vous aurez TOUS LES STYLES appliquée à cet élément

Ceci est valable dans Chrome, Safari, Opera et IE avec leurs propres outils de développement.

Opéra ( DragonFly est déjà installé avec Opera)

Firefox (Besoin FireBug plugIn)

Internet Explorer (Besoin Barre d'outils du développeur d'IE plugin)

Chrome & Safari ( Inspecteur Web fait déjà partie de Chrome et Safari)

Answer 3

Chrome 77 dispose désormais de Copy styles dans le menu contextuel de l'onglet Inspecter l'élément.

Cliquez avec le bouton droit de la souris sur le Element > Inspect > Right click on the element in the opened Elements tab > Copy > Copy styles

Answer 4

Personnellement, je prendrais le css de l'ensemble du site web, car il peut affecter l'élément choisi.

1- Allez dans la console et exécutez cette fonction

function copyCSS(){
  let cssStyles = ''

  // Started at index 1 for index 0 is browser's user agent stylesheet.
  for (let i = 1; i < document.styleSheets.length; i++) {
    let style = null

    try {
      if (document.styleSheets[i]) {
        const classes =
          document.styleSheets[i].cssRules || document.styleSheets[i].rules

        if (classes) style = classes
      }
      for (const item in style) {
        if (style[item].cssText != undefined) cssStyles += style[item].cssText
      }
    } catch (e) {
      continue
    }

  }

  return cssStyles
}

2- Exécuter dans la console

copy(copyCSS())

Vous avez dans votre presse-papiers tous les CSS.

Answer 5

En un mot :

Firebug .

Utilisez Firebug pour inspecter l'élément, vous pourrez alors voir la cascade. Encore mieux, vous pouvez copier et coller directement à partir de FB vers un fichier CSS.

Si vous voulez utiliser d'autres navigateurs, vous pouvez également utiliser leurs outils de développement préinstallés (F12 dans IE (nécessite la barre d'outils de développement d'IE), clic droit - inspecter l'élément dans chrome) ou vous pouvez utiliser Firebug Lite . :)