Возврат метаданных с помощью CSS

Question

У меня есть таблица стилей CSS, которая динамически создается на сервере и возвращается через тег <link>.Можно ли вернуть какие-либо метаданные с этой таблицей стилей, которые я мог бы прочитать с помощью JavaScript?

(Вариант использования: возвращаемая мной таблица стилей представляет собой комбинацию нескольких более мелких. Я хочу, чтобы мой код JavaScript могопределить, какие меньшие были включены.)

Я подумал о добавлении некоторых пользовательских свойств для элемента:

body {
  -my-custom-prop1:0;
  -my-custom-prop2:0;
}

Но когда я пытаюсь прочитать их с помощью:

window.getComputedStyle(document.body)['-my-custom-prop1']

они не возвращаются.Любые другие идеи?

РЕДАКТИРОВАТЬ: Я в конечном итоге принял немного другой подход.Вместо добавления тега <link> я сделал AJAX-запрос на получение таблицы стилей и добавил ее текст в тег <style>.Таким образом, я мог бы использовать заголовки ответа HTTP для включения метаданных.Конечно, это не будет работать в разных доменах, как тег <link>.

Answer 1

См. Пример следующего & # x2192;

Несмотря на то, что я считаю эту технику необоснованной, я разработал кое-что, что я протестировал для работы в Chrome, FF, Safari и IE8.

Во-первых, я выбрал свойство list-style-image, которое будет использоваться для хранения метаданных, поскольку оно может содержать любую строку в параметре url() и, тем не менее, не будет использоваться ни при каких обычных условиях в CSS тела.

Затем я реализовал общую кросс-браузерную функцию для getComputedStyle, поскольку она доступна не во всех браузерах.

Затем я проанализировал возвращаемое свойство, чтобы получить только данные внутри url(''), в результате чего были получены следующие функции:

var getStyle = function(el, cssprop) {
    if (el.currentStyle) {
        return el.currentStyle[cssprop];
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
        return document.defaultView.getComputedStyle(el, "")[cssprop];
    } else {
        return (el.style) ? el.style[cssprop] : 0;
    }
};

var pullCSSMeta = function() {
    var aMeta = getStyle(document.body, 'listStyleImage').split('/'),
        meta = aMeta[aMeta.length - 1];

    return decodeURIComponent(meta.substr(0, meta.length - 1).replace(/"$/,''));
};

Если вам нужно хранить более одной части информации, вы можете разделить запятую данные или потенциально даже сохранить строку JSON. Я надеюсь, что у вас есть веская причина для этого, поскольку я думаю, что есть лучшие способы хранения метаданных ... но все готово!

См. Пример & # x2192;

Answer 2

Возвращенный объект фактически представляет используемые значения CSS 2.1, а не вычисленные значения.https://developer.mozilla.org/en/DOM/window.getComputedStyle

Возможно, вы сможете опросить эти стили другим способом: http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

Answer 3

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