Javascript - dopasowywanie wysokości diva do jego szerokości

Question

Witam, chcę ustawić wysokość diva równą jego szerokości, zastosowałem następujący kod:

let width = document.getElementsByClassName('btn')[0].offsetWidth;
        let btn = document.getElementsByClassName('btn');
        for (let i = 0; i < btn.length; i++){
            btn[i].height = width;
        }

Który nie daje efektu wizualnego, a po wpisaniu do konsoli "btn[i].height" dostaję jego prawidłową wysokość. WIęc dlaczego div ma wysokość według konsoli, a nie ma jej w rzeczywistości?

Comments

Wyświetl sobie w konsoli height z wyliczonych styli: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Sprawdź też w inspektorze elementów (narzędzia deweloperskie przeglądarki) czy ten element domyślnie ma padding i bordery oraz jaki ma box-sizing.

---

Zwraca "normal".

A sam element ma marginesy i border-box

---

Pokaż jeszcze kod HTML i CSS.

Answer 1

Po co to robic w JS?

Masz fajną własciwość css:

height: 100vw;

 

Comments

Przy zwiększaniu, bądź zmniejszaniu rozmiaru okna przeglądarki wysokość diva ma się równać szerokości, która w css jest ustawiona jako procent, vw nic mi nie daje.

---

Spróbuj tego: https://css-tricks.com/aspect-ratio-boxes/

Answer 2

Bo divy nie mają przecież własnośći height. Powinieneś ustawiać style.height:

div.style.height = `${ width }px`;

 

Comments

Ustawiałem wszystko, offsetHeight, style.height, height ... nic nie działa

Answer 3

Znalazłem sposób zastępczy: btn[i].setAttribute...