如何访问Javascript数组中的元素（div类名），并更改其不透明度？

Question

我有一个通过ClassName搜索元素而生成的数组：

var tempNodeList = document.getElementsByClassName("grids");

如何访问每个元素（基本上是divs）并更改其不透明度？ 我已经试过了：

tempNodeList[b].style.opacity = 0

其中“ b”是for-in循环中的变量。 但是，我似乎无法接触到对象以影响其不透明度/其他属性。

编辑：我确实将HTML集合/ NodeList转换为数组。 新数组称为allBoxes。 但是我似乎无法使用以下方式访问元素：

allBoxes[1].style.opacity

这是我的职能（仍在进行中）。 最后的注释行是我用来在数组中的项目上运行淡入淡出循环的内容。

box01.addEventListener("mouseenter", fadeOutBoxes);

box02.addEventListener（“ mouseenter”，fadeOutBoxes）;

函数fadeOutBoxes（e）{

var thisBox = e.target.id;

var grid = thisBox.slice(0, 4);
var tempBoxNum = thisBox.slice(4);
var boxNum = ("0" + tempBoxNum).slice(-2);
var gridBoxNum = grid.concat(boxNum);

console.log("grid = " + grid);
console.log("tempBoxNum = " + tempBoxNum);
console.log("boxNum = " + boxNum);
console.log("gridBoxNum = " + gridBoxNum);

///// for in enumerative testing //////////////////////
var tempNodeList = document.getElementsByClassName("grids"); /// THIS CREATES AN HTML COLLECTION-NOT AN ARRAY
console.log(tempNodeList.valueOf()); //for testing - just lists out the array elements
var allBoxes = Array.from(tempNodeList); /// CONVERT THE HTML COLLECTION TO AN ARRAY
    console.log(allBoxes);

for (var b in allBoxes) {
    console.log(allBoxes[b].id);

        //if (allBoxes[b].id === "grid01") { // works with specified name
        if (allBoxes[b].id === gridBoxNum) { // trying with programmatically generated name


            //remove THIS BOX from array
            allBoxes.splice(b, 1);
        }

    ////// run fades on the newly trimmed array of gridBoxes
    var op = 1; // intial opacity
    var timer = setInterval(function () {
    if (op <= 0.1){
        clearInterval(timer);   
    }
    //e.target.style.opacity = op; // HOLD - original opacity fade command
    //console.log("e.target.style.opacity: " + e.target);
    //allBoxes[1].style.opacity = op;
    op -= op * 0.1;
    }, 20);
}

}

Answer 1

您可以使用如下所示的for循环。

 let element = document.getElementsByClassName("box"); for (let i of element) { i.style.opacity = 0.5; } 

 .box { width: 100px; height: 100px; background-color: red; } .box2 { width: 100px; height: 100px; background-color: red; } 

 <div class="box"></div> <div class="box2"></div> <div class="box"></div> <div class="box2"></div> 

Answer 2

您可以通过使用Object.values创建一个数组来迭代对象。 这将给出所有元素的数组，您可以在循环中一个接一个地更改样式

 var tempNodeList = document.getElementsByClassName("grids"); Object.values(tempNodeList).forEach(e=>e.style.opacity = 0) 

 <div class="grids">a</div><div class="grids">b</div><div class="grids">c</div><div class="grids">d</div> 

Answer 3

一种方法是使用散布运算符将getElementsByClassName()返回的HTMLCollection映射到数组。 请注意，HTMLCollection不是数组：

HTMLCollection接口表示元素（按文档顺序）的通用集合 （类似于参数的类似数组的对象），并提供用于从列表中选择的方法和属性。

示例：（已更新为使用淡出效果）

 var tempNodeList = document.getElementsByClassName("grids"); var op = 1; var timer = setInterval(() => { op -= 0.1; [...tempNodeList].forEach(x => x.style.opacity = op); if (op <= 0.1) { clearInterval(timer); console.log("Stop fadeOut effect!"); } }, 150); 

 <div class="grids" style="background:red;">RED</div> <div class="grids" style="background:blue;">BLUE</div> <div class="grids" style="background:yellow;">YELLOW</div> 

但是实际上您可以使用一个简单的for循环来做同样的事情：

 var tempNodeList = document.getElementsByClassName("grids"); var op = 1; var timer = setInterval(() => { op -= 0.1; for (let i = 0; i < tempNodeList.length; i++) { tempNodeList[i].style.opacity = op; } if (op <= 0.1) { clearInterval(timer); console.log("Stop fadeOut effect;"); } }, 150); 

 <div class="grids" style="background:red;">RED</div> <div class="grids" style="background:blue;">BLUE</div> <div class="grids" style="background:yellow;">YELLOW</div> 

Answer 4

Array.from(tempNodeList).forEach(
    a => a.style.opacity = 0
)

Answer 5

您可以使用Array.from将类似Object的array转换为array ，然后循环

 function changeOpacity(){ var tempNodeList = document.getElementsByClassName("grids"); Array.from(tempNodeList).forEach(elm => { elm.style.opacity = 0; }) } 

 .grids{ height:50px; width:50px; background:orange; } 

 <div class="grids"></div> <div class="grids"></div> <div class="grids"></div> <div class="grids"></div> <div class="grids"></div> <div class="grids"></div> <button id="btn" onclick="changeOpacity()">Change opacity</button>