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

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>

CodePudding user response：

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

CodePudding user response：

you can also try jQuery

$("bk").width()

CodePudding user response：

Try this :

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