Могу ли я получить значение нестандартного свойства CSS через Javascript?

Question

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

#someElement {
  foo: 'bar';
}

Мне удалось получить его значение с помощью свойства currentStyle в IE7:

var element = document.getElementById('someElement');
var val = element.currentStyle.foo;

Но currentStyle зависит от MS. Поэтому я попробовал getComputedStyle () в Firefox 3 и Safari 3:

var val = getComputedStyle(element,null).foo;

... и возвращает неопределенное значение. Кто-нибудь знает кросс-браузерный способ получения значения пользовательского свойства CSS?

(Как вы могли заметить, это недопустимый CSS. Но он должен работать, пока значение соответствует правильному синтаксису. Лучшим именем свойства будет "-myNameSpace-foo" или что-то в этом роде.)

Answer 1

Современные браузеры будут просто выбрасывать любые недействительные CSS. Однако вы можете использовать свойство содержимого, так как оно действует только с :after, :before и т. Д. В нем можно хранить JSON:

#someElement {
    content: '{"foo": "bar"}';
}

Затем используйте такой код, чтобы получить его:

var CSSMetaData = function() {

    function trimQuotes( str ) {
         return str.replace( /^['"]/, "" ).replace( /["']$/, "" );   
    }

    function fixFirefoxEscape( str ) {
        return str.replace( /\\"/g, '"' );
    }

    var forEach = [].forEach,
        div = document.createElement("div"),
        matchesSelector = div.webkitMatchesSelector ||
                          div.mozMatchesSelector ||
                          div.msMatchesSelector ||
                          div.oMatchesSelector ||
                          div.matchesSelector,
        data = {};

    forEach.call( document.styleSheets, function( styleSheet ) {
        forEach.call( styleSheet.cssRules, function( rule ) {
            var content = rule.style.getPropertyValue( "content" ),
                obj;

            if( content ) {
                content = trimQuotes(content);
                try {
                   obj = JSON.parse( content );
                }
                catch(e) {
                    try {

                        obj = JSON.parse( fixFirefoxEscape( content ) );
                    }
                    catch(e2) {
                        return ;
                    }

                }
                data[rule.selectorText] = obj;
            }
        });

    });


    return {

        getDataByElement: function( elem ) {
            var storedData;
            for( var selector in data ) {
                if( matchesSelector.call( elem, selector ) ) {
                    storedData = data[selector];
                    if( storedData ) return storedData;

                }
            }

            return null;
        }
    };

}();
var obj = CSSMetaData.getDataByElement( document.getElementById("someElement"));
console.log( obj.foo ); //bar

Обратите внимание, это только для современных браузеров. Демо: http://jsfiddle.net/xFjZp/3/

Answer 2

Firefox не переносит теги, атрибуты или стили CSS, которые он не понимает, из кода в DOM. Это по замыслу. Javascript имеет доступ только к DOM, а не к коду. Так что нет, нет способа получить доступ к свойству из javascript, которое сам браузер не поддерживает.

Answer 3

Читая информацию о таблице стилей в IE, вы МОЖЕТЕ получить эти «поддельные» свойства, но только в IE, который мне известен.

var firstSS = document.styleSheets[0];
var firstSSRule = firstSS.rules[0];
if(typeof(firstSSRule.style.bar) != 'undefined'){
  alert('value of [foo] is: ' + firstSSRule.style.bar);
} else {
  alert('does not have [foo] property');
}

Это ужасный код, но вы получите картинку.

Answer 4

У меня тоже есть несколько страниц, которые прекрасно работают в MSIE, но содержат много информации в стилях и таблицах стилей. Так что я думаю об обходных путях. К счастью, Firefox позволяет вставлять встроенные атрибуты в DOM. Итак, вот частичная стратегия:

1. Замените каждый встроенный стиль в HTML-документе соответствующим "nStyle", например, ...

2. Когда страница загружена, выполните следующие действия с каждым узлом элемента: (a) скопируйте значение атрибута nStyle в cssText тега и одновременно (b) преобразуйте нестандартные атрибуты в более простой формат, так что, например, node.getAttribute ('nStyle') становится объектом {"nref": "# myid", "foo": "bar"}.

3. Напишите функцию «selectedStyle», которая получает стиль или nStyle, в зависимости от того, что доступно.

Написание грубого парсера для таблиц стилей может привести к аналогичной стратегии для них, но у меня есть вопрос: как мне преодолеть препятствия при чтении таблицы стилей без цензуры в Firefox?

Answer 5

Конечно, можно написать собственный CSS-парсер на Javascript. Но я считаю, что это действительно сверх.

Answer 6

Может быть, вы можете попробовать с МЕНЬШЕ . Это язык динамических таблиц стилей, и вы можете создавать нестандартные атрибуты CSS, команды, которые будут скомпилированы позже.