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

Я пытаюсь прочитать пользовательское (нестандартное) свойство CSS, заданное в таблице стилей (не атрибут inline style) и получить его значение. Возьмите этот 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;

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

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

Ответы

Ответ 1

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

Ответ 2

Современные браузеры просто выбросят любой недопустимый 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/

Ответ 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');
}

Его уродливый код, но вы получаете изображение.

Ответ 4

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

  • Заменить каждый встроенный стиль в html-документе соответствующим "nStyle", например, < span class= "cls1" nStyle = "color: red; nref: #myid; foo: bar" > ... </span>

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

  • Напишите функцию "calculateStyle", которая получает либо стиль, либо nStyle, в зависимости от того, что доступно.

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

Ответ 5

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

Ответ 6

Возможно, вы можете попробовать с LESS. Это язык динамических стилей, и вы можете создавать нестандартные атрибуты css, команды, которые будут компилироваться позже.