2

I am a beginner coder. It is probably very simple, but I tried to find the answer and have not succeeded. My question is why do width and height properties of div object return undefined while they are apparently 100px both?

In this topic is explained how to get .offsetWidth property. But as I understand it is not 100% the same as .width.

window.onload = function() {

  var test = document.getElementById("test");
  test.addEventListener("click", select);


  function select(e) {
    var elementID = e.target.id;
    var element = document.getElementById(elementID);
    var width = element.width;
    console.log(element);
    console.log(width);
  }

}
div#test {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: black;
}
<div id="test"></div>

My answer

Thank you all guys for your answers. They pushed me to find my own simple solution which I hope will be helpful for such beginners as me. The answer is: div DOM object does not have .width and .height property even if you assign them in CSS and they work well. For this purpose it has .style.width and .style.height respectively. But even if you assign them through CSS they will not appear in element.style until you do it purposefully using Java Script. So to get width or height of the div element through JS first of all remove these properties from CSS. You will not need them anymore. Then assign width through element.style.width command and then you can easily get it whenever you want using element.style.width.

CSS

div {
    position: absolute;
    background-color: black;
}

JavaScript

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);
    test.style.width = "100px";
    test.style.height = "100px";


    function select(e) {                                  
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        var width = element.style.width;
        console.log(element);
        console.log(width);
    }

}
Black Beard
  • 1,130
  • 11
  • 18
  • 2
    `element.style.width` – Tyr Apr 27 '18 at 11:32
  • you need to use computed style to get width defined by style – Temani Afif Apr 27 '18 at 11:45
  • Black Beard, I added a 2nd dupe link, which likely show what you are looking for – Asons Apr 27 '18 at 12:06
  • @TemaniAfif If you close it, make sure you reference a proper answer. In this case, and as I guess you meant in a comment, it is likely `getComputedStyle` OP asks for...which I just now added to the dupe link(s) – Asons Apr 27 '18 at 12:08
  • @LGSon well my comment was for the comment added by tyr :) ... he got upvoted but it's wrong as we need computed style to get the style defined by CSS ...and that dup was already suggested and when I saw it i found it was good for his needs – Temani Afif Apr 27 '18 at 12:11
  • @TemaniAfif Ok...next time, add username in the comment, so it is clear to whom you address a comment :) – Asons Apr 27 '18 at 12:14

2 Answers2

5

Use offsetWidth and offsetHeight

var test = document.getElementById("test");
test.addEventListener("click", select);


function select(e) {
  var elementID = e.target.id;
  var element = document.getElementById(elementID);
  var offsetWidth = element.offsetWidth;

  var positionInfo = element.getBoundingClientRect();
  var height = positionInfo.height;
  var width = positionInfo.width;

  console.log('element', element);
  console.log('offsetWidth', offsetWidth);
  console.log('width', width);
  console.log('height', height);
}
div#test {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: black;
}
<!doctype html>
<html lang="en">

<head>
  <title>test</title>
  <meta charset="utf-8">
</head>

<body>

  <div id="test"></div>

</body>

</html>
Saeed
  • 5,413
  • 3
  • 26
  • 40
0

I think you need clientWidth and clientHeight.

edixon
  • 991
  • 6
  • 16