CODEWITHSUNDEEP
javascripthtmlcss
ßamuel
ßamuel

Reputation: 35

document.getElementById().style.[style] returns blank

I'm trying to get the width of an object using document.getElementById("bk").style.width, but it always returns blank, along with any other style I use.

window.onload = function sizemake() {
  console.log("There should be something after this:" +
    document.getElementById("bk").style.width)
}
#keyboard {
  position: absolute;
  display: table;
  width: 1366px;
  height: 90px;
  bottom: 0px;
}

#wk,
#bk {
  display: table-cell;
  border-color: #000000;
  border-width: 1px;
  border-style: solid;
}

#wk {
  position: relative;
  height: 90px;
  width: 1.92%;
  background-color: #ffffff;
}

#bk {
  z-index: 1;
  position: absolute;
  height: 52px;
  width: 58.05%;
  right: -9.04px;
  background-color: #000000;
}
<div id='wk'>
  <div id='bk'></div>
</div>

Upvotes: 0

Views: 75

Answers (3)

dizad87
dizad87

Reputation: 468

you can also try jQuery

$("bk").width()

Upvotes: 0

Dave Anderson
Dave Anderson

Reputation: 12294

The property you are accessing is for the inline style attribute.

If you had the following markup you would get the value 100px

<div id='wk'>
  <div id='bk' style="width: 100px;"></div>
</div>

To get the actual width of the element use getBoundingClientRect()

document.getElementById("bk").getBoundingClientRect().width

Upvotes: 2

xlmaster
xlmaster

Reputation: 721

Try this :

document.querySelector("div.bk").style.width

Upvotes: -1

Related Questions