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

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

Читая информацию о таблице стилей в 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');
}

Его уродливый код, но вы понимаете.

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

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

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

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

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

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

Современные браузеры просто выбрасывают недопустимые css. Однако вы можете использовать свойство content, поскольку оно действует только с :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.info( obj.foo ); //bar

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

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