¿Cómo puedo agarrar todos los estilos CSS de un elemento?

Si me gusta un elemento de un sitio y quiero implementarlo en mi sitio, ¿cuál es la forma más fácil de hacerlo? A veces hay muchos archivos CSS, es difícil seguirlos a todos.

abra Firefox , instale Firebug haga clic derecho sobre el elemento que desea, elija Inspect element y luego abra el área Computed

Tendrás TODOS LOS ESTILOS aplicados a ese elemento

Esto es válido en Chrome, Safari, Opera e IE con sus propias herramientas de desarrollo

Opera ( DragonFly ya está instalado con Opera)

enter image description here

Firefox (Necesita FireBug plugIn)

enter image description here

Internet Explorer (Necesita el complemento IE Developer Toolbar )

enter image description here

Chrome y Safari ( Web Inspector ya es parte de Chrome y Safari)

enter image description here

Usar Javascript funcionó mejor para mí. Así es como lo hice:

  1. Abra la consola de Chrome DevTools.
  2. Pegue esta función dumpCSSText de esta respuesta de desbordamiento de stack en la consola y presione 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. Al usar Chrome, puede inspeccionar un elemento y acceder a él en la consola con la variable $0 . Chrome también tiene un comando de copy , por lo tanto, use este comando para copiar TODO el css del elemento inspeccionado:

     copy(dumpCSSText($0)); 
  4. ¡Pega tu CSS donde quieras! 🎉

En una palabra:

Firebug .

Usa Firebug para inspeccionar el elemento, luego puedes ver la cascada. Aún mejor, puede copiar y pegar directamente de FB a un archivo CSS.

Si desea utilizar otros navegadores, también puede usar sus herramientas de desarrolladores preinstaladas (F12 en IE (requiere la barra de herramientas de desarrolladores de IE), haga clic derecho – inspeccionar el elemento en cromo) o puede usar Firebug Lite . 🙂

En Chrome / Chromium puedes ver el estilo calculado. En FF necesitarás Firebug para ver el estilo calculado, en Opera use firefly

Use algo como FireBug o las herramientas de desarrollador de Chrome para inspeccionar el DOM y ver qué estilos se aplican al elemento en cuestión.

IE8: haga clic en F12 -> haga clic en “Seleccionar elemento haciendo clic” (la flecha blanca, a la izquierda en el menú de icons) -> Volver a la página web, haga clic en el elemento que desee -> Volver a Herramientas de desarrollador página de IE y verá todo el estilo enumerado a la derecha.

Otros ya respondieron por otros navegadores. 🙂