How get all style of element

Question

I have style like this :

.filter {
      background-image: url("../images/index.png"); !important;
      background-blend-mode: difference !important;
      filter: invert(1);
      box-shadow: inset 0 0 0 1px black;
      **other style**
    }

and I wanna get all the style it is possible ?

if I want get with property-name like

$(selector).css(property-name:property-value);

I should write many line code for it because the style is many.

• I can not use inline style and get it with attr

Answer 1

You cannot get the properties of a single CSS class, but you can get all the computed style of an element:

var e = getElementById('myElement');
console.log( getComputedStyle(e) );

Answer 2

You can use getComputerStyle

const h3 = document.querySelector("h3");
const result = document.getComputedStyle(h3).content();

GetComputedStyle Docs

Also you can use getAttribute method with style

conat h3 = document.querySelector("h3");

let styles = h3.getAttribute("style");
styles.replace(" ", "")
    .split(";")
    .map(s => s.split(":"));