Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get element's custom css properties (-mystyle) using JavaScript

Tags:

javascript

css

In an application where certain elements have custom CSS properties, is there any way to retrieve such a value via JavaScript?

e.g.

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

I can access the color attribute via these two methods:

document.getElementById('myDiv').style.getPropertyValue("color")
document.getElementById('myDiv').style.color

But these do not work for custom properties. Is this supported at all?

like image 491
Aaron J Spetner Avatar asked Jan 10 '12 21:01

Aaron J Spetner


People also ask

How do I retrieve the properties of a CSS element?

You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the css() method. Here's the basic syntax: $(selector). css("propertyName");

Can we change CSS properties values using JavaScript?

CSS variables have access to the DOM, which means that you can change them with JavaScript.

What is JavaScript custom property?

Property names that are prefixed with -- , like --example-name , represent custom properties that contain a value that can be used in other declarations using the var() function.


1 Answers

CSS values not understood by the browser are discarded, which explains why -my-custom-property was unavailable via .style.

In the past, you would have had to rely on storing the data with data attributes and dealing with inheritance yourself via JavaScript.

However, "custom properties", aka "CSS variables", have since been introduced into the standard and implemented by browsers, with ~92% support globally as of 2019-05-09. At a quick glance, Edge seems to have been the last major browser to implement, with version 16 on October 16, 2017.

Essentially, you need to set a custom property (eg, --my-custom-property: 'foobar';) on an element, and it can be accessed with something like getComputedStyle(your_el).getPropertyValue("--my-custom-property") which would return 'foobar' (with a leading space). Note the leading space and quotation marks. It will return the value exactly as it was provided.

Example:

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>

Here's some testing using one and two leading hyphens, inheritance, and different methods of retrieving the value:

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 .style
function 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 value
let 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)
  })
})
code {
  background: #eee;
  padding: .2em;
}

.bad {
  color: #800;
}

.good {
  color: #080;
}
<article class="custom-prop-inheritance" style="--my-custom-property: 'foobar'; -my-custom-property: 'foobar'">
  <h1>Title</h1>
  <p>Custom properties require two leading hyphens (<code>-my-custom-property</code> <em>never</em> works). Using <code>el.style</code> does not support inheritance. To support both inheritance and custom properties, you must use <code>getComputedStyle(<b>el</b>)</code> along with two leading hyphens on the custom property (eg, <code>--my-custom-property</code>).</p>
</article>
<ul></ul>
like image 79
0b10011 Avatar answered Oct 12 '22 10:10

0b10011