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，這在您使用它的位置沒有意義。

我不完全確定你的意思，但這段代碼修復了一些問題，並可能導致你找到解決方案。

最顯着的變化：

• 引入了id 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>