Question

我正在编写一个遍历数组的函数，该函数将确定元素中要更改的内容。我尝试了一些想法，包括模板文字，但没有达到预期的结果。有什么想法可以将所需的dom通过数组更改为函数吗？

testArray = [["background", "yellow"]];

const changeElement =(id, array)=>{
    let element = getElementById(id);

    for(let i = 0; i<=array.length-1; i++){
      for(let j = 0; j<=array.length-1; j++){
       `${element}.style.${array[i][j]} = "${array[i][j+1]}"`;  
    }}
}

Answer 1

1）您可以使用Object.fromEntries将testArray转换为

{
    background: "yellow"
}

然后遍历此对象。

2）看这个

const changeElement = (id, array)=>{
    const element = document.getElementById(id);

    for(let i = 0; i<=array.length-1; i++){
        for(let j = 0; j<=array.length-1; j++){
            element.style[array[i][j]] = array[i][j+1];
        }
    }
}

changeElement("myId", [["background", "yellow"]]);

您可以通过括号从对象中获取值

3）您不应该使用for循环。您可以使用Array.prototype.forEach来减少编写次数，例如

const changeElement = (id, array)=>{
    const element = document.getElementById(id);

    array.forEach(value => {
        element.style[value[0]] = value[1];
    });
}

changeElement("myId", [["background", "yellow"]]);

https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/forEach

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/map

Answer 2

您不需要模板文字。这行不通。

只需使用方括号（[ ]）即可。

在JavaScript中，您可以使用点（.）运算符或使用方括号（[ ]）访问对象的属性。

例如，如果您具有如下对象：

var obj = {
    x: "Hii",
    y: 5,
};

现在，如果您要访问x中的obj，则可以通过两种方式访问它：

console.log(obj.x); // Hii

// This will also work
console.log(obj["x"]); // Hii

类似地，对于y：

console.log(obj.y); // 5

// This will also work
console.log(obj["y"]); // 5

现在，在这种情况下，element.style是一个对象。如果要访问background的属性element.style，可以执行以下操作：

// This won't work for your case as the property to be modified is stored in array
element.style.background = "yellow";

// But this will work!
element.style["background"] = "yellow";

因此，在进行迭代时，您可以执行以下操作：

let testArray = [["background", "yellow"]]; 

const changeElement =(id, array) => { 
    let element = document.getElementById(id); 

    for(let i = 0; i<=array.length-1; i++){ 
        for(let j = 0; j<=array.length-1; j++){ 
            element.style[array[i][j]] = array[i][j+1];
        }
    } 
}

但是我认为您的testArray将采用以下格式：

let testArray = [["prop1", "value1"], ["prop2", "value2"], ... ];

如果是这样，您的代码将无法正常工作，可以简化为仅使用一个for循环，如下所示：

  let testArray = [["background", "yellow"], ["color", "red"]]; 

const changeElement =(id, array) => { 
    let element = document.getElementById(id); 

    for(let i = 0; i < array.length; i++){ 
        element.style[array[i][0]] = array[i][1];
    } 
}

希望这会有所帮助：）

如何使用变量来决定对DOM元素进行哪些更改？

2 个答案: