Как получить все настройки CSS с помощью JQuery?

Question

Я хотел бы знать все настройки CSS на странице, используя jquery. Я знаю, чтобы получить настройки некоторых CSS, мы делаем это,

$('#container').css("width")

Таким образом, я попытался использовать $('*'), чтобы получить все настройки CSS, но не смог. Пожалуйста, дайте мне совет.

Answer 1

Если вы хотите элементы со встроенным CSS, попробуйте:

$("[style]").each(function() {
  for (var i=0; i<this.style.length; i++) {
    console.log(this.style[i] + " = " + this.style.getPropertyValue(this.style[i]));
  }
});

Примечание: здесь используются имена стилей Javascript, которые соответствуют спецификации CSS, а не те, которые используются в jQuery css() (например, "margin-top" в CSS " marginTop "в css()).

Если вы хотите, чтобы весь стиль, который применяется к элементу на основе его встроенного стиля и правил CSS, определяемых как внутренне на веб-странице, так и с помощью внешних таблиц стилей, это будет несколько сложнее.

По крайней мере, вы можете найти глобальные таблицы стилей с чем-то вроде:

for (var i=0; i<document.styleSheets.length; i++) {
  var css = document.styleSheets[i];
  for (var j=0; j<css.length; j++) {
    console.log(css[j] + " = " + css.getPropertyValue(css[j]));
  }
}

Answer 2

Для меня ваш вопрос недостаточно ясен, чтобы ответить. Чего именно вы хотите достичь?

все настройки CSS на странице

может означать много разных вещей.

• Хотите ли вы рассчитать CSS свойства браузера
• Требуются ли оригинальные классы CSS, которые применяются (не вычисленные значения, а объявленные значения из файлов .css) + все они или только наиболее конкретное соответствие
• Хотите оригинальные встроенные CSS-стили
• Хотите ли вы список всех включенных таблиц стилей
• Вы действительно хотите все свойства или только их выбор
• Вы хотите это для каждого элемента на странице или только для определенных
• ....