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

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

Ответы

Ответ 1

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

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

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

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

Ответ 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, и вы увидите, что весь стиль указан справа.

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