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>