Get variable name of css prop

Question

I'm trying to get the name of the variable used in CSS on an element

How can I return the string --my-background from document.getElementById("my_div")

getComputedStyle returns #000

:root {
  --my-background: #000;
}

.my_class {
  background-color: var(--my-background);
}

<div id="my_div" class="my_class">
  Test
</div>

I can't use the solution shown at How can I get css variable name(key) with javascript because multiple variables will have the same hex code

Answer 1

Not 100% sure what you are after actually

THIS is a closely related question: Can I detect if a specific CSS custom variable exists in the loaded styles?

Here as a verbose example of two different possible ways to get to what you are after; one on the entire document and one JUST on your element.

LOTS of comments and commented out parts here.

const declaration = document.styleSheets[0].cssRules[0].style;
//console.log(declaration);//huge list
const decValues = Object.values(declaration); // just values
//console.log("decValues:",decValues);
// just the ONE value we "know" starts with
//const foundVars = decValues.filter((v) => { return v.startsWith("--");});
//console.log("foundVars:",foundVars);// shows value for those (one) with it
let declarationC = Object.getOwnPropertyNames(declaration);
// console.log("declarationC:",declarationC); // just the property names
// the properties that start with "--"
const allNotEmptyComputedStyles = Object.fromEntries(
  Object.entries(declaration).filter(
    ([_, value]) => value.startsWith("--")
  )
);
// this is "0" key name because that is where it IS in the properties
console.log("allNotEmptyComputedStyles:", allNotEmptyComputedStyles);

/* now a different way just on the element */
let me = document.getElementById("my_div");
let cs = getComputedStyle(me);
// big list of all console.log("cs:",cs);
let cspv = cs.getPropertyValue('--my-background');
console.log("cspv:", cspv);
console.log("PV:", allNotEmptyComputedStyles["0"], cs.getPropertyValue(allNotEmptyComputedStyles["0"]));

:root {
  --my-background: #000;
}

.my_class {
  background-color: var(--my-background);
}

<div id="my_div" class="my_class">
  Test
</div>