Получить значение css без элемента DOM

Мне интересно, есть ли способ получить значение css из файла стилей, если в нем не используется элемент DOM? Я использую jQuery, и я использую selector $( ". Classname" ). Css(), чтобы получить значения. Но в случае "classname" не содержится ни в каком элементе, что делать, чтобы получить значение "Спасибо

Ответ 1

Просто создайте элемент с этим именем класса и проверьте его. Вам даже не нужно прикреплять его к DOM:

var $el = $('<div class="classname"></div>');
var opacity = $el.css('opacity') // or whatever

Даже если $el на самом деле не присутствует в DOM, вы все равно получаете доступ ко всем его свойствам стиля.

Изменить: как упоминалось в комментариях, этот подход не всегда работает должным образом (например, унаследованные значения css, не определенные в .classname явно, специфичность селектора выше .classname и т.д.).

Например, следующее сбой из-за #foo увеличивает селекторную специфичность, превышающую спецификацию автономного .bar:

CSS

#foo .bar { color: red; }

JS:

var $el = $('<div class="bar"></div>');
$el.css('color'); // Expected: "red", Actual: ""

Ответ 2

См. Http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript, который представляет кросс-браузерный подход для динамического получения и добавления CSS.

Он работает с document.styleSheets и IE .rules и всеми остальными .cssRules

Он также имеет преимущество в том, что он несколько абстрагирован, поэтому вам не нужно беспокоиться о деталях.

Приведенная выше ссылка больше не работает. Ниже приведен скриншот статьи в блоге, снятый архивом Интернета в 2008 году.

Функция в основном перебирает все стили всех таблиц стилей и предоставляет возможность изменять/удалять их.
Обратите внимание, что это не может быть рекомендовано, так как большинство современных таблиц стилей слишком велики, чтобы сделать это эффективной операцией.

Ответ 3

Вам нужно разобрать стили из document.styleSheets.

Ответ 4

Вы можете пойти (это также работает в Chrome):

var $elem = $('<div id="foo"></div>').appendTo('body'),
    value = $elem.css('margin-top');

$('#foo').remove();

Ответ 5

Чтобы обойти проблему Chromium, вам нужно добавить ее в тело:

Пример CSS:

.dummy {
  min-width: 50px;
  max-width: 250px;
}

Пример Javascript:

$(document).ready(function() {
  var dummy = $('<div class="dummy" style="display: none;"></div>').appendTo('body');
  console.log(dummy.css("min-width"));
  console.log(dummy.css("max-width"));
  dummy.remove();
});

Это работает во всех современных браузерах Chrome, FF, IE11.