javascript, установить высоту как ширину для элемента div

Question

Я пытаюсь создать страницу, состоящую из квадратов. Я не смог сделать это с помощью css, поэтому я попытался использовать javascript. Мой сценарий выглядит так:

<script type="text/javascript"> 
var box-width = document.getElementById('foo').offsetWidth; 

var element = document.getElementsByClassName('home-box'); 
for(var i = 0; i < element.length; i++) { 
element[i].style.height = 'box-width'; 
} 
</script> 

</head> 

<div class="body"> 
<div class="home-box"> 
<p>Lorem</p> 
</div> 

Может ли кто-нибудь сказать мне, почему он не работает? И я новичок, поэтому, возможно, ошибка очень простая.

Или, может быть, есть способ использовать CSS?

Answer 1

Заменить

element[i].style.height = 'box-width'; 

С

element[i].style.height = box-width + "px"; 

Answer 2

box-width не является допустимым идентификатором в JavaScript. Это фактически означает box minus width, что не имеет смысла в том месте, где вы его используете.

Я не совсем уверен, что вы имели в виду, но этот фрагмент исправляет некоторые проблемы и может привести вас к решению.

Наиболее заметные изменения:

• Введенный идентификатор foo в HTML, так что вы можете получить этот элемент
• Измененный box-width к box_width, чтобы сделать его действительный идентификатор JavaScript
• используется переменная, а чем "box-width" as a string constant, and added the unit 'px'`.
• Добавлена ​​граница в CSS, поэтому вы можете видеть, что элемент фактически получает высоту.

var box_width = document.getElementById('foo').offsetWidth; 
 

 
var elements = document.getElementsByClassName('home-box'); 
 
for(var i = 0; i < elements.length; i++) { 
 
    elements[i].style.height = box_width + 'px'; 
 
}

.home-box { 
 
    border: 1px solid blue; 
 
}

<div class="body"> 
 
    <div id="foo" class="home-box"> 
 
    <p>Lorem</p>