CODEWITHSUNDEEP
javascriptcss
Aaron J Spetner
Aaron J Spetner

Reputation: 2155

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

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?

Upvotes: 17

Views: 16104

Answers (6)

0b10011
0b10011

Reputation: 18785

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>

Upvotes: 16

M.Adam
M.Adam

Reputation: 136

CSS:

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

Javascript:

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

Upvotes: 12

matsko
matsko

Reputation: 22183

This is actually now possible for all browsers using a specialized CSS hack via the CSS content tag. This article explains how to do it:

http://www.yearofmoo.com/2015/04/cross-browser-custom-css-properties.html

Upvotes: 1

yk77500
yk77500

Reputation: 36

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;

}

Upvotes: 1

Sven Bieder
Sven Bieder

Reputation: 5681

You can't use data-* attributes (html5)? That would at least be valid and not a strange hack.

Upvotes: -2

Rob W
Rob W

Reputation: 348972

Non-recognised CSS properties will be ignored when put within the style attribute, or in the style.cssText property.

If you want to define a property at a specific element, I recommend data-attributes:
HTML:

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

JavaScript:

//jQuery's 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");

Upvotes: 7

Related Questions