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

I want to change style of elements with same class name, by loading external .js

本文关键字：同类 元素 样式 改变 加载 外部 js      更新时间：2023-09-26

我想做一个网格，将由一些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'。我希望所有的div与类名block有一定的大小，所以我写了这段代码，保存为外部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';
}

问题出在将"块"定位到某个位置的部分。下面的代码是在相同的外部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代码一行一行地放在浏览器控制台中，它就可以工作，但这不是我的意思(尽管它只适用于加载页面后生成的div，通过将appendChild写入控制台中，而不适用于与页面一起加载的div)。

我该怎么做才能使这个外部js文件对页面和页面中的所有div施加更改，以便我得到排列的块?

您的代码中有几个问题:

第一个问题是计算:

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

当您可以连接字符串以获得所需的className - "block"+i+"-"+j时，您可以使用eval。请使用以下代码块:

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

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

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

尝试用'转义第一个数字。

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';")

http://forums.mozillazine.org/viewtopic.php?f=9& t = 277768

相关文章：