Question

我正在尝试构建一个由quadrats组成的页面。我无法用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

box-width不是JavaScript中的有效标识符。它实际上意味着box minus width，这在您使用它的位置没有任何意义。

我不确定您的意思，但此代码段修复了一些问题，并可能引导您找到解决方案。

最显着的变化：

在HTML中引入了ID foo，因此您实际上可以获得该元素
将box-width更改为box_width，使其成为有效的JavaScript标识符
使用变量而不是"box-width" as a string constant, and added the unit＆＃39; px＆＃39;`。
在CSS中添加了边框，因此您可以看到该元素实际上达到了高度。

＆＃13;

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';
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

替换

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

使用

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

javascript，将height设置为div元素的宽度

2 个答案: