CODEWITHSUNDEEP
javascripthtmlcss
Thailandian
Thailandian

Reputation: 585

How can I get and set style properties of an object that come from a class?

I have a simple animation function that simulates a button being pushed, by varying the width: 

function bPress(b) {
  var w = (parseFloat(b.style.width)*0.96);
  if (b.style.width.substr(-1)=="%") {
    var s ="%";
  }
  else {
    var s = "em";
  }
    b.style.width = w +s;
    b.onmouseup = function () {
      w = (parseFloat(b.style.width)/0.96);
      b.style.width = w+s;
    // etc.
}

This was working well until I started cleaning up my code and changed inline CSS style declarations to classes. I previously had, for example: 

<div style= 'height: 1.5em; width: 100%; margin: 0 auto; margin-top: 0.2em; font: inherit; font-weight:bold' onclick='checkSave("continue")' onmousedown='bPress(this)'>Continue</div>

I moved the CSS parts to a new class:

.response_button {
  height: 1.5em;
  width: 100%;
  margin: 0 auto;
  margin-top: 0.2em;
  font: inherit;
  font-weight:bold
}

... avoiding repetition and of course simplifying the div tags. But the animations stopped working. After some experimenting, I eventually came up with a temporary solution by moving the width back into an inline style declaration. But this seems wrong.

So 2 questions:

  1. Why does this.style.width not work if the width is declared inside a class?
  2. Is there a way to get and set a div's properties if they are declared inside a class?

Edit: For completeness, using nick zoum's answer, here is the modified bPress function:

function bPress(b) {
  var w_px = window.getComputedStyle(b).width;
  var w_int = (parseInt(w_px));
  b.style.width = Math.round(w_int * 0.96) + "px";
  b.onmouseup = function () {
    b.style.width = w_px;
  }
}

Upvotes: 0

Views: 829

Answers (1)

nick zoum
nick zoum

Reputation: 7285

You can use getComputedStyle to get all of the calculated style properties of an element.

var dom = document.querySelector("#foo");

console.log(getComputedStyle(dom).backgroundColor);
#foo {
  background-color: red;
  width: 10px;
  height: 10px;
}
<div id="foo"></div>

Upvotes: 1

Related Questions