How to get style of clicked element - "currentTarget"

Question

currentTarget works when I add style the html element. How can I access the style file of the clicked element without without adding style the html element?

const all = document.querySelectorAll(".all");

all.forEach((button) => {
  button.addEventListener("click", (e) => {
    let bgColor = e.currentTarget.style.backgroundColor;
    console.log(bgColor);
  });
});

div {
  color: white;
  height: 2em;
  width: 15em;
  margin: 2em;
  padding: 2em;
  
  background-color: royalblue;
}

span {
  color: white;
  height: 2em;
  width: 15em;
  margin: 2em;
  padding: 2em;
  
  background-color: red;
}

<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>

<span style="background-color: black;" class="all">I am useless</span>

https://jsfiddle.net/bcz0t6gx/⁣⁣⁣⁣⁣ ⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣ ⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣

score 4 · Accepted Answer · answered Aug 13 '21 at 15:59

Use window.getComputedStyle() to get the CSSStyleDeclaration of the element and getPropertyValue() to get the value of the CSS property:

const all = document.querySelectorAll(".all");

all.forEach((button) => {
  button.addEventListener("click", (e) => {
    let bgColor = window.getComputedStyle(e.currentTarget).getPropertyValue("background-color");
    console.log(bgColor);
  });
});

.all {
  color: white;
  height: 2em;
  width: 15em;
  margin: 2em;
  padding: 2em;
  
  background-color: royalblue;
}

span {
  color: white;
  height: 2em;
  width: 15em;
  margin: 2em;
  padding: 2em;
  
  background-color: red;
}

<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>

<span style="background-color: black;" class="all">I am useless</span>

score 2 · Answer 2 · answered Aug 13 '21 at 16:01

You can use window.getComputedStyle to find styles applied to an element. The following getStyle function makes this simple.

const getstyle=function(n,css){
    let style;
    if( window.getComputedStyle ){
        style = window.getComputedStyle( n, null ).getPropertyValue( css );
    } else if( n.currentStyle ){
        css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
            return p1.toUpperCase();
        });
        style = n.currentStyle[ css ];
    } else {
        style='';
    }
    return style;
};



document.querySelectorAll(".all").forEach((button) => {
  button.addEventListener("click", (e)=>{
    console.log( getstyle(e.currentTarget,'background-color') );
  });
});

.all {//changed this to prevent console becoming weird
  color: white;
  height: 2em;
  width: 15em;
  margin: 2em;
  padding: 2em;
  
  background-color: royalblue;
}

span {
  color: white;
  height: 2em;
  width: 15em;
  margin: 2em;
  padding: 2em;
  background-color: red;
}

<div class="all">I'm a thin, big and insulated also soft, prickly box.</div>
<span style="background-color: black;" class="all">I am useless</span>

How to get style of clicked element - "currentTarget"

2 Answers2