Let's say I need a button that can change style when mousedown event happen, and recover to it's normal style when mouseup event fired.

What I'm trying to do is to cache the old css styles in the mousedown event handler, so they can be available for mouseup event handler (They are way too many, I don't want to set them one by one).

But as the following code shows, when browser callback my event listener, it pass to me a button object without any css style properties.

My question is: did I miss something? Or it's just suppose to be so? If this is the case, how can I get it's css style properties when javascript select a DOM element?

let show = function(key) {
  console.log(key.style.backgroundColor); // should be red
};

const btn = document.querySelector('.button');
btn.addEventListener('click', () => {
  show(btn);
});

.button {
  width: 100px;
  height: 40px;
  background-color: red;
}

<button class="button">Click me to show "red"</button>