Why the function element.style.height in JavaScript may not work?

Question

I cannot get the object's height in js code. My HTML code:

<!DOCTYPE html>
<html lang="en">
    <body>
      <object onload="loadMarkers()" type="image/svg+xml" data="WorldMap.svg" id="worldMap"></object>
      <script src="project.js"></script>
    </body>
</html>

JS code (the name of the file in HTML is right, I checked it):

function loadMarkers() {
    var h = document.getElementById("worldMap").style.height;
    console.log(h);
}

The console output is an empty line. If I write

var h = Number(document.getElementById("worldMap").style.height);
console.log(h);

the output is 0.

try to write to console document.getElementById("worldMap") and view object — Vla Mai, Mar 20 '21 at 23:50
Do you have CSS code that actually sets the height of the object? If not, that's why there is no output. If you're trying to get the actual height, look [here](https://stackoverflow.com/q/18147915/262708). — Lil Devil, Mar 21 '21 at 00:11
@LilDevil yes, I have a CSS code "width: 100%; height: auto"; I should have mentioned it. — Gabriela Ticu, Mar 21 '21 at 00:47
@GabrielaTicu this object has parameter style with parater height ? — Vla Mai, Mar 21 '21 at 00:59
@Gabriela Ticu based on the CSS you posted, if your code above worked, I would only expect it to return "auto". Follow the link I posted above and check the highly voted answers. — Lil Devil, Mar 21 '21 at 01:03
my theory at start it's actual 0 height y need to wait when it onload="loadMarkers()" and get heaight after — Vla Mai, Mar 21 '21 at 01:04
@VlaMai right in the console no, but when I hover the console output, it highlights the object and under the object, I see its width and height — Gabriela Ticu, Mar 21 '21 at 01:08
setTimeout(function () { var h = Number(document.getElementById("worldMap").style.height); console.log(h); }, 5000) — Vla Mai, Mar 21 '21 at 01:16
Thank you all for the help! I used document.getElementById("worldMap").getBoundingClientRect().height and now it works. — Gabriela Ticu, Mar 21 '21 at 01:52

score 1 · Answer 1 · answered Mar 21 '21 at 17:38

1

Use .offsetHeight instead of .style.height:

var h = Number(document.getElementById("worldMap").offsetWidth);
console.log(h);

answered Mar 21 '21 at 17:38

Martin Osusky

820
1
6
15

Why the function element.style.height in JavaScript may not work?

1 Answers1