javascript - 我想通过加载外部 .js 来更改具有相同类名的元素的样式

Question

我正在尝试制作一个将由一些 javascript 代码控制的网格。

<div id="blockFrame">
    <div id="blockGrid">
        <div class="block 0-0">1</div>
        <div class="block 0-1">1</div>
        <div class="block 0-2">1</div>
        <div class="block 1-0">1</div>
        <div class="block 1-1">1</div>
        <div class="block 1-2">1</div>
        <div class="block 2-0">1</div>
        <div class="block 2-1">1</div>
        <div class="block 2-2">1</div>
        <div class="block 3-0">1</div>
        <div class="block 3-1">1</div>
        <div class="block 3-2">1</div>
        <div class="block 4-0">1</div>
        <div class="block 4-1">1</div>
        <div class="block 4-2">1</div>
    </div>
</div>

这是一个 5x3 的表格，每个单元格当前包含“1”。我希望所有类名 block 的 div 都有一定的大小，所以我写了这段代码，保存为外部 js 文件并让页面加载该文件。它奏效了。

var blockSize = document.getElementsByClassName("block");
for (i=0; i<blockSize.length; i++) {
    blockSize[i].style.width='2.85em';
    blockSize[i].style.height='2.85em';
    blockSize[i].style.position='absolute';
}

问题出在将“ block ”定位到某个位置的部分。下面的代码是在同一个外部 js 文件中编写的，但它没有完成这项工作。

for (i=0; i<chunkWidth; i++)
    for (j=0; j<10*5/chunkWidth; j++) {
        eval("document.getElementsByClassName('"+i+"-"+j+"')[0].style.bottom='"+(3.25*5/chunkWidth*j)+"em';")
        eval("document.getElementsByClassName('"+i+"-"+j+"')[0].style.left='"+(3.25*5/chunkWidth*i)+"em';")
    }

变量 chunkWidth 定义在页面将加载的另一个外部 js 文件中，它是一个数字。加载页面时出现此错误。

TypeError: document.getElementsByClassName(...)[0] is undefined

如果我将 eval 代码逐行放在浏览器控制台中，它会起作用，但这不是我的意思(尽管它仅适用于加载页面后通过将 appendChild 写入控制台而创建的 div，不适用于 div随页面一起加载)。

我应该怎么做才能让这个外部js文件对页面和页面中的所有div产生变化，这样我就可以安排好 block 了？

Answer 1

你的代码有几个问题:

第一个问题是计算:

for (var i=0; i<chunkWidth; i++) {
    for (j=0; j<10*5/chunkWidth; j++) {

从html中我们可以看出max i === 4, max j === 2

• 如果 chunkWidth 为 1 - max i = 0 且 max j = 49 - 非法
• 如果 chunkWidth 为 2 - max i = 1 且 max j = 24 - 非法
• 如果 chunkWidth 为 3 - max i = 2 且 max j = 15 - 非法
• 如果 chunkWidth 为 4 - max i = 3 且 max j = 12 - 非法
• 如果 chunkWidth 为 5 - max i = 4 且 max j = 10 - 非法
• 超过 5 i < 5 - 非法

类名应以 _/-/a-z/A-Z 开头，因此将编号类更改为 block0-1，依此类推。

<div id="blockFrame">
    <div id="blockGrid">
        <div class="block block0-0">1</div>
        <div class="block block0-1">1</div>
        <div class="block block0-2">1</div>
        <div class="block block1-0">1</div>
        <div class="block block1-1">1</div>
        <div class="block block1-2">1</div>
        <div class="block block2-0">1</div>
        <div class="block block2-1">1</div>
        <div class="block block2-2">1</div>
        <div class="block block3-0">1</div>
        <div class="block block3-1">1</div>
        <div class="block block3-2">1</div>
        <div class="block block4-0">1</div>
        <div class="block block4-1">1</div>
        <div class="block block4-2">1</div>
    </div>
</div>

您使用脚本而不是使用 css 完成所有工作。所以不是这个 block :

var blockSize = document.getElementsByClassName("block");
for (i=0; i<blockSize.length; i++) {
    blockSize[i].style.width='2.85em';
    blockSize[i].style.height='2.85em';
    blockSize[i].style.position='absolute';
}

只需使用这个 css:

.block {
    position: absolute;
    height: 2.85em;
    width: 2.85em;
}

当您可以连接一个字符串以获得所需的类名时，您可以使用 eval - "block"+i+"-"+j。请改用此代码块:

var block;

for (var i=0; i<chunkWidth; i++) {
    for (j=0; j<10*5/chunkWidth; j++) {
        block = document.getElementsByClassName("block"+i+"-"+j)[0];
        console.log("block"+i+"-"+j);
        block.style.bottom = 3.25*5/chunkWidth*j+"em";
        block.style.left = 3.25*5/chunkWidth*i+"em";
    }
}

你应该等到元素被渲染，所以把外部脚本引用放在主体的末尾，或者使用这个

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code
});