1

I know how to get and set single custom properties (CSS variables). But i have no idea how i can get a list of all custom-properties (key: value) ?

Example for get my custom properties (if i know the names)

const bodyStyles = window.getComputedStyle(document.body);
const colorText = bodyStyles.getPropertyValue('--color-text');
const colorBg = bodyStyles.getPropertyValue('--color-background');

console.log('color text is =>', colorText);
console.log('color background is =>', colorBg);
:root {
  --color-text: red;
  --color-background: #ffedd0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-text);
  background: var(--color-background);
}
<p>how to get all custom properties (key: value) per javascript ?</p>

My question is how can i get a list of all properties if i don't know their names ?

In my case i want an array like this:

allBodyProperties = [
  { "--color-text": "red" },
  { "--color-background": "#ffedd0" }
];

Is there something like getPropertyEntries() ?

EDIT

This is no duplicate because the linked answer is technically outdated and not runnable on todays browsers -> getMatchedCSSRules

d-h-e
  • 2,478
  • 1
  • 10
  • 18
  • 1
    the solution in the duplicate isn't the best one but the question remain a duplicate, probably someone else will one day come with a better one – Temani Afif Mar 08 '19 at 07:59
  • hmm, thx - really not the most beautiful solution. Maybe there will come better solutions if you don't mark the question as duplicate? – d-h-e Mar 08 '19 at 08:05
  • 2
    it's still a duplicate question, you are asking the same question so if someone have another solution it should belong to the duplicate target. [marking as duplicate will not prevent new answers] ... Don't forget to also consider bounty in case you need to attract more attention. – Temani Afif Mar 08 '19 at 08:10
  • INO: The linked solution uses **getMatchedCSSRules** which is deprecated _since 2014_ and now complete [out of Chrome](https://www.chromestatus.com/feature/4606972603138048) – d-h-e Mar 08 '19 at 12:30

0 Answers0