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

Question

Я пытаюсь прочитать пользовательское (нестандартное) свойство 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; 

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

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

Answer 1

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

Answer 2

Чтение в информации стилей в 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 3

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

Answer 4

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

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

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

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

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

Answer 5

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

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