如何访问Javascript数组中的元素(div ClassNames)，并更改它们的不透明度？
如何访问Javascript数组中的元素(div ClassNames)，并更改它们的不透明度？
提问于 2019-02-19 03:29:47
我有一个数组，它是通过ClassName搜索元素而生成的：
var tempNodeList = document.getElementsByClassName("grids");如何访问每个元素(基本上是div)并更改它们的不透明度？我已经尝试过了：
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);
}}
回答 5
Stack Overflow用户
发布于 2019-02-19 03:34:11
您可以使用如下所示的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>
Stack Overflow用户
发布于 2019-02-19 03:34:18
您可以通过使用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>
Stack Overflow用户
发布于 2019-02-19 03:36:25
一种方法是使用扩展运算符将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54754110
复制相关文章
相似问题
腾讯云开发者
