How to read width of css element with javascript?

Question

So I want this VarDisk2 element to disappear after VarDisk1 width reaches more than 70. How can I do this?

 <script>
        var VarDisk1 = document.querySelector("Disk1");
        var VarDisk2 = document.getElementsByClassName("Disk2");
        let width = VarDisk1.offsetWidth;

        if(width > 70)
            VarDisk2.style.display = "none";

    </script>

[`getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName) returns a HTML collection, but you are applying a `style` value as if `VarDisk2` is a single element. It is possible that is the only issue. — Tigger, Sep 01 '21 at 10:54
And `querySelector` expects an css selector string, as it stands right now, you are selecting the tag `Disk1` which probably does not exist — empiric, Sep 01 '21 at 11:10
What makes `VarDisk1` element change width? Need more information. You can check out [This answer](https://stackoverflow.com/a/19418065/3733151). This way you can check width of the element every time it changes — temo, Sep 01 '21 at 11:11

score 1 · Answer 1 · answered Sep 01 '21 at 11:05

For checking all classes

<script>
        ...
        var VarDisk2 = document.getElementsByClassName("Disk2");
        let width = VarDisk1.offsetWidth;

        if(width > 70) {
            VarDisk2.forEach(ele => ele.style.display = "none";)
        }

</script>

for first class:

<script>
        ...
        var VarDisk2 = document.getElementsByClassName("Disk2")[0];
        ...
</script>

How to read width of css element with javascript?

1 Answers1