使用JavaScript获取元素的自定义CSS属性（-mystyle）

使用JavaScript获取元素的自定义CSS属性（-mystyle）

浏览器无法理解的CSS值将被丢弃，这说明了为什么

-my-custom-property

无法通过来获取CSS值

.style

。

过去，您不得不依靠存储具有数据属性的数据并自己通过Javascript处理继承。

但是，自此以来，“自定义属性”（也称为“CSS变量”）已被引入标准并由浏览器实现，截止到2019-05-09，全球约有92％的支持。乍一看，Edge似乎是最后一个实现的主要浏览器，2017年10月16日发布了版本16。

本质上，您需要

--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 ><h1 id="a">#a 'hello'</h1></div><div id="b-div"><h1 id="b">#b 'world'</h1></div>

这是使用一个和两个前导连字符，继承以及检索值的不同方法进行的一些测试：

function log(computed, selector, prop, value) {  let method = computed ? "getComputedStyle(el)" : "el.style"  let method_id = computed ? "computed" : "raw"  // Build first level of list (tag name)  let first = document.querySelector("#" + selector)  if (!first) {    first = document.createElement("li")    first.appendChild(document.createTextNode(selector))    first.setAttribute("id", selector)    first.appendChild(document.createElement("ul"))    document.querySelector("ul").appendChild(first)  }  // Build second level of list (method of style retrieval)  let second = document.querySelector("#" + selector + "-" + method_id)  if (!second) {    second = document.createElement("li")    second.appendChild(document.createTextNode(method))    second.setAttribute("id", selector + "-" + method_id)    second.appendChild(document.createElement("ul"))    first.querySelector("ul").appendChild(second)  }  // Build third level of list (property accessed)  let third = document.querySelector("#" + selector + "-prop" + prop)  if (!third) {    third = document.createElement("li")    third.appendChild(document.createTextNode(prop + ": `" + value + "`"))    third.setAttribute("id", "prop" + prop)    second.querySelector("ul").appendChild(third)    if (value === "") {      third.classList.add("bad")    } else {      third.classList.add("good")    }  }}// Uses .stylefunction getStyleAttr(selector, prop) {  let value = document.querySelector(selector).style.getPropertyValue(prop)  log(false, selector, prop, value)}// Uses getComputedStyle()function getStyleComputed(selector, prop) {  let value = getComputedStyle(document.querySelector(selector)).getPropertyValue(prop)  log(true, selector, prop, value)}// Loop through each property for each element and output the valuelet selectors = ["article", "h1", "p"]let props = ["--my-custom-property", "-my-custom-property"]selectors.forEach(function(selector) {  props.forEach(function(prop) {    getStyleAttr(selector, prop)    getStyleComputed(selector, prop)  })})pre {  background: #eee;  padding: .2em;}.bad {  color: #800;}.good {  color: #080;}<article  >  <h1>Title</h1>  <p>Custom properties require two leading hyphens (<pre>-my-custom-property</pre> <em>never</em> works). Using <pre>el.style</pre> does not support inheritance. To support both inheritance and custom properties, you must use <pre>getComputedStyle(<b>el</b>)</pre> along with two leading hyphens on the custom property (eg, <pre>--my-custom-property</pre>).</p></article><ul></ul>