Wie kann ich alle CSS-Stile eines Elements erfassen?

Wenn mir ein Element einer Website gefällt und ich es in meine Website implementieren möchte, wie geht das am einfachsten? Manchmal gibt es viele CSS-Dateien, die schwer zu überblicken sind.

AKTUALISIEREN: Wie @tank unten antwortet, hat Chrome Version 77 „Copy Styles“ hinzugefügt, wenn Sie mit der rechten Maustaste auf ein Element im Devtools-Inspektor klicken.

Die Verwendung von Javascript hat bei mir am besten funktioniert. So habe ich es gemacht:

1. Öffnen Sie die Chrome DevTools-Konsole.

2. Fügen Sie dies ein dumpCSSText Funktion von diesem Stapelüberlauf in die Konsole antworten und drücken 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. Wenn Sie Chrome verwenden, können Sie ein Element überprüfen und in der Konsole darauf zugreifen $0 Variable. Chrome hat auch eine copy Befehl, verwenden Sie also diesen Befehl, um ALLE CSS des inspizierten Elements zu kopieren:

   copy(dumpCSSText($0));
   

4. Fügen Sie Ihr CSS ein, wo immer Sie möchten! 🎉

offen FeuerfuchsInstallieren Feuerwanze Klicken Sie mit der rechten Maustaste auf das gewünschte Element, wählen Sie es aus Inspect element und öffnen Sie dann die Computed Bereich

du wirst haben ALLE STILE auf dieses Element angewendet

Dies gilt in Chrome, Safari, Opera und IE mit ihren eigenen Entwicklungstools

Oper (Libelle ist bereits mit Opera installiert)

Feuerfuchs (Bedürfnisse FeuerBug Plugin)

Internet Explorer (Bedürfnisse IE-Entwicklersymbolleiste Plugin)

Chrom & Safari (Webinspektor ist bereits Teil von Chrome und Safari)

Chrome 77 hat jetzt Copy styles im Kontextmenü auf der Registerkarte Element prüfen.

Klicken Sie mit der rechten Maustaste auf die Element > Inspect > Right click on the element in the opened Elements tab > Copy > Copy styles

In einem Wort:

Feuerwanze.

Verwenden Sie Firebug, um das Element zu inspizieren, dann können Sie die Kaskade sehen. Noch besser, Sie können Kopieren und Einfügen direkt aus FB in eine CSS-Datei.

Wenn Sie andere Browser verwenden möchten, können Sie auch deren vorinstallierte Entwicklertools verwenden (F12 im IE (erfordert die IE-Entwicklersymbolleiste) Rechtsklick – Element inspizieren in Chrome) oder Sie können verwenden Firebug Lite. 🙂

In Chrom/Chromium können Sie sich einen berechneten Stil ansehen. In FF benötigen Sie Firebug, um den berechneten Stil zu sehen, in Opera verwenden Sie firefly

Verwenden Sie etwas wie FireBug oder die Entwicklertools von Chrome, um das DOM zu untersuchen und zu sehen, welche Stile auf das betreffende Element angewendet werden.

IE8: Klicken Sie auf F12 –> klicken Sie auf “Element durch Klicken auswählen” (der weiße Pfeil ganz links im Symbolmenü) –> gehen Sie zurück zur Webseite, klicken Sie auf das gewünschte Element –> gehen Sie zurück zu den Entwicklertools Seite von IE und Sie sehen den gesamten Stil auf der rechten Seite.

Andere haben bereits für andere Browser geantwortet. 🙂