Получить значение пользовательского свойства CSS с помощью JavaScript - не должно быть возможным

Цель состоит в том, чтобы определить пользовательское значение свойства CSS во внешней таблице стилей.

Возиться

Внешний CSS:

#myDiv {
  --myCustomProperty: 'myCustomValue';
}

Разметка:

<html>
    <div id='myDiv'></div>
</html>

В спецификации CSS нет ничего, что говорило бы, что пользовательские свойства недопустимы. Тем не менее, браузер будет отображать их как недействительные, но теоретически они должны быть доступны через window.getComputedStyle или подобное. Firebug показывает пользовательское свойство и его значение на панели стилей, но помечается как перезаписанное.

Следующий фрагмент от: http://www.quirksmode.org/dom/getstyles.html

JavaScript:

function getStyle(el,styleProp) {
    var x = document.getElementById(el);
    if (x.currentStyle)
      var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
      return y;
}

var value = getStyle('myDiv', '--myCustomProperty');

alert(value);

Вывод должен быть строкой "myCustomValue"

Источник

2 ответа

Как уже говорилось, может быть, это поможет вам:

Вы можете хранить пользовательские свойства для элементов в файле.json, который вы позволяете редактировать.

структура может быть что-то вроде:

{
    "element": 'myDiv',
    "properties": [
            {
                "propertyName": 'SomeName',
                "propertyValue" : 'SomeValue'
            },
            {
                "propertyName" : 'SomeOtherName',
                "propertyValue"  : 'SomeOtherValue'
            },

        ]

    }

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

Примеры поиска объекта json можно найти здесь: Поиск объектов JSON с помощью JQuery

и вы можете загрузить файл JSON в переменную, используя следующие методы: Загрузка локального файла JSON

Это, вероятно, все еще не идеальное решение, но оно будет работать во всех браузерах.

Источник

Это должно работать (протестировано в Firefox 32).

    <html>
<head>

<style>
#myDiv {
  --myCustomProperty: 'myCustomValue';
}
</style>
</head>
<body>
<div id='myDiv'></div>
<script>
function getStyle(el,styleProp) {
    var x = document.getElementById(el);
    if (x.currentStyle)
      var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
      return y;
}

var value = getStyle('myDiv', '--myCustomProperty');

alert(value);
</script>
</body>
</html>

http://jsfiddle.net/tugvgs1z/1/ Тем не менее, это не работает в Chrome и IE 11. Существует хорошее обсуждение API пользовательских свойств CSS по ссылке.

Источник
Другие вопросы по тегам