Ошибка получения ширины калькуляции CSS с помощью JS - PullRequest
Новая
       34

Ошибка получения ширины калькуляции CSS с помощью JS

0 голосов
/ 14 февраля 2019

Мне нужно сделать квадратный элемент, основанный на ширине экрана.Чтобы установить высоту, равную ширине, я попытался использовать JS, но, похоже, это немного неправильно.Вот пример 

var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';
#square {
  background-color: blue;
  width: calc(20vw - 16px);
  padding: 8px;
}
<div id="square">Element</div>

Синий «квадрат» выше не является квадратным.Может ли кто-нибудь объяснить, почему?Вместо clientWidth я пробовал scrollWidth и offsetWidth с похожими результатами.Я также не получил style.width, чтобы выдавать правильные числа.

Даже если вы проверяете в Chrome, синий квадрат, вы получаете число для высоты и ширины, которые близки, но все же сильно отличаются.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Вы можете просто использовать тот же кальци для высоты 

width: calc(20vw - 16px);
height: calc(20vw - 16px);
0 голосов
/ 14 февраля 2019

Два вопроса.Сначала вы должны рассмотреть заполнение, поэтому добавьте box-sizing:border-box, затем вы определили ширину, используя vw единицу, так что у вас будет квадрат только при первом открытии страницы и никогда изменить размер браузера. 

var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';
#square {
  background-color: blue;
  width: calc(20vw - 16px);
  padding: 8px;
  box-sizing:border-box;
}
<div id="square">Element</div>

если вы хотите, чтобы размер квадрата оставался при изменении размера окна, вам нужно использовать то же заданное значение, а не вычисленное значение в пикселях (Как читать значения правил CSS с помощью JavaScript? )

Или изменить значение при изменении размера: 

var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';

window.onresize=function() {
  square.style.height = square.clientWidth + 'px';
};
#square {
  background-color: blue;
  width: calc(20vw - 16px);
  padding: 8px;
  box-sizing:border-box;
}
<div id="square">Element</div>

В качестве примечания вы можете рассмотреть переменную CSS, чтобы указать одно и то же значение только один раз, или отметьте это: Сохраните аспектсоотношение деления с CSS 

#square {
  --v:calc(20vw - 16px);
  background-color: blue;
  width: var(--v);
  height: var(--v);
  padding: 8px;
  box-sizing:border-box;
}
<div id="square">Element</div>
...