Получить элементы пользовательских свойств css (-mystyle) с помощью JavaScript

В приложении, где определенные элементы имеют пользовательские свойства CSS, есть ли способ получить такое значение через JavaScript?

например.

<div id="myDiv" style="color:#f00;-my-custom-property:upsidedown;" />

Я могу получить доступ к атрибуту цвета через эти два метода:

$('myDiv').style.getPropertyValue("color")
$('myDiv').style.color

Но это не работает для пользовательских свойств. Поддерживается ли это вообще?

Ответы

Ответ 1

Значения CSS, не понятные браузеру, отбрасываются, что объясняет, почему -my-custom-property было недоступно через .style.

В прошлом вам приходилось полагаться на хранение данных с атрибутами данных и самостоятельное наследование с помощью JavaScript.

Однако с тех пор "пользовательские свойства", то есть "переменные CSS", были введены в стандарт и реализованы браузерами, причем поддержка на уровне ~ 92% во всем мире по состоянию на 2019-05-09 гг. На первый взгляд, Edge, похоже, был последним основным браузером, реализованным с версией 16 16 октября 2017 года.

По сути, вам нужно установить пользовательское свойство (например, --my-custom-property: 'foobar';) для элемента, и к нему можно получить доступ что-то вроде getComputedStyle(your_el).getPropertyValue("--my-custom-property") который возвращает 'foobar' (с пробелом в начале). Обратите внимание на начальные пробелы и кавычки. Он вернет значение в точности так, как оно было предоставлено.

Пример:

console.log(getComputedStyle(document.getElementById("a")).getPropertyValue("--my-custom-property-1"))
console.log(getComputedStyle(document.getElementById("b")).getPropertyValue("--my-custom-property-2"))
#b-div { --my-custom-property-2: 'world' }
<div style="--my-custom-property-1: 'hello'"><h1 id="a">#a 'hello'</h1></div>
<div id="b-div"><h1 id="b">#b 'world'</h1></div>

Ответ 2

CSS

:root {
    --custom-property: #000000;
}

JavaScript:

var custom_property = window.getComputedStyle(document.body).getPropertyValue('--custom-property').trim()

Ответ 3

Непризнанные свойства CSS будут проигнорированы при вводе в атрибут style или в свойстве style.cssText.

Если вы хотите определить свойство в определенном элементе, я рекомендую атрибуты данных:
HTML:

<div id="myDiv" style="color:#f00;" data-custom-property="upsidedown" />

JavaScript:

//jQuery method to retrieve value:
$("#myDiv").data("custom-property");
//jQuery, without parsing:
$("#myDiv").attr("data-custom-property");

// Modern browsers, native JS:
document.getElementById("myDiv").dataset["custom-property"];
// Older browsers, native JS:
document.getElementById("myDiv").getAttribute("data-custom-property");

Ответ 5

function getCustomCssProperty(elementID, propertyName){
  var style = document.getElementById(elementID).getAttribute("style");
  var entries = style.split(";");

 for (var i=0; i<entries.length; i++){
  var entry = entries[i].split(":");
  if(entry[0] == propertyName){
   return entry[1];
  }
 }  

 return null;

}

Ответ 6

Вы не можете использовать атрибуты data- * (html5)? Это было бы, по крайней мере, действительным, а не странным взломом.