Как я могу захватить все стили CSS по элементу?

Если мне нравится элемент сайта, и я хочу его реализовать на своем сайте, что это самый простой способ сделать это? Иногда есть много файлов CSS, которые трудно отслеживать по всей теме.

Ответ 1

откройте Firefox, установите Firebug правой кнопкой мыши на нужный элемент, выберите Inspect element, а затем откройте область Computed

у вас будет ВСЕ STYLES, примененные к этому элементу

Это действительно в Chrome, Safari, Opera и IE со своими инструментами разработки

Opera (DragonFly уже установлен с Opera)

Firefox (требуется FireBug plugin)

Internet Explorer (требуется плагин IE Developer Toolbar)

Chrome и Safari (веб-инспектор уже входит в состав Chrome и Safari)

Ответ 2

Использование Javascript сработало лучше для меня. Вот как я это сделал:

Откройте консоль Chrome DevTools.

Вставьте эту функцию dumpCSSText из этот ответ в консоли и нажмите 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;
}

При использовании Chrome вы можете проверить элемент и получить доступ к нему в консоли с помощью переменной $0. У Chrome также есть команда copy, поэтому используйте эту команду, чтобы скопировать ВСЕ css проверяемого элемента:
```
copy(dumpCSSText($0));
```
Вставьте свой CSS везде, где захотите! 🎉

Ответ 3

Одним словом:

Firebug.

Используйте Firebug для проверки элемента, затем вы можете увидеть каскад. Еще лучше, вы можете скопировать и вставить прямо из FB в файл CSS.

Если вы хотите использовать другие браузеры, вы также можете использовать свои предустановленные инструменты для разработчиков (F12 в IE (требуется панель инструментов разработчиков IE), щелкните правой кнопкой мыши - проверьте элемент в хроме), или вы можете использовать Firebug Lite.:)

Ответ 4

В chrome/Chromium вы можете посмотреть на вычисленный стиль. В FF вам понадобится Firebug, чтобы увидеть вычисленный стиль, в Opera используйте firefly

Ответ 5

Используйте что-то вроде инструментов разработчика FireBug или Chrome, чтобы проверить DOM и посмотреть, какие стили применяются к рассматриваемому элементу.

Ответ 6

IE8: нажмите F12 → нажмите "Выбрать элемент по клику" (белая стрелка, оставленная больше всего в меню значков) → Вернитесь на веб-страницу, щелкните элемент, который вам нравится → Вернитесь назад на странице инструментов разработчика IE, и вы увидите, что весь стиль указан справа.

Другие уже ответили за другие браузеры.:)