我如何使用变量来决定在 DOM 元素上更改什么？

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

现在如果你想访问 obj 的 x，你可以通过两种方式访问它：

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 是一个对象。如果要访问 element.style 的属性 background，可以执行以下操作：

// 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 元素上更改什么？

How can I use variables to decide what to change on a DOM element?

javascript

variables

dom

literals