Как я могу захватить все стили 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, и вы увидите, что весь стиль указан справа.
Другие уже ответили за другие браузеры.:)