Get CSS properties in JS by css class name [duplicate]

Question

How do I get the CSS properties of an element with js? Let say I have the following

.btn {
  background-color: green;
}

.navbtn {
  font-size: 20px;
}

and

<button id='mybtn' class='btn navbtn' onclick='alert("hi")'>Click me</button>

Then, I want to extract the CSS properties of the element mybtn. If I do

window.getComputedStyle(document.getElementById('mybtn'))

it returns a CSSStyleDeclaration which contains all CSS properties, even those I didn't set. However, what I want is an object (or whatever) that contains

{
  background-color: green;
  font-size: 20px;
}

and everything else will consider as 'default'.

So my question is:

Is there such function or library that does the job?
If not, is it possible to get the CSS properties given the class name (like getProperties('btn') returns { background-color: green; })

Thanks in advance

This is the answer for your question: stackoverflow.com/a/16966533/1789796 — Sushant Tayade
– Sushant Tayade, Commented Aug 20, 2020 at 7:53
@empiric Not really. I do not know which properties were modified. So I can't do window.getComputedStyle(document.getElementById('mybtn')).fontSize because I didn't know fontSize was modified. — Henry Fung
– Henry Fung, Commented Aug 20, 2020 at 7:54

mohamed ibrahim · Accepted Answer · 2020-08-20 08:00:10Z

-2

So simple as this code :

let background = document.querySelector('.btn').style.backgroundColor;
console.log(backround);

answered Aug 20, 2020 at 8:00

mohamed ibrahim

5835 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Quentin Over a year ago

The reads the inline style of a specific property. The question is looking for all the properties set, but not through inline style

Collectives™ on Stack Overflow

Get CSS properties in JS by css class name [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related