如何编辑在 innerHTML 中创建的元素的样式？答案

【问题标题】：How can i edit the style of elements created in innerHTML?如何编辑在 innerHTML 中创建的元素的样式？
【发布时间】：2020-07-25 02:32:27
【问题描述】：

我想在单击 img 时从 innerHTML 更改第二个 div 元素的样式，但这不起作用。

     function display(restaurantArr, name){
     title.innerHTML = `<h2>Available restaurants in ${name}:`
     for(let items of restaurantArr){
       console.log(items)

       main.innerHTML += `
        <div class="container">
            <p class="containerP">${items.restaurant.name}</p>
            <img onclick="editDiv2()" id="imageid" class="imgAdd" src="pngwave.png">
        </div>

        <div id="someid" class="container2">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
        </div>
    `

}

}

我尝试编辑第二个 div 的函数。虽然我明白为什么这不起作用，但它是我试图做的事情的可视化：

function editDiv2(){
    const div2 = document.querySelector('.div2')
    div2.style.color = "red";
}

【问题讨论】：

可能只是笔误，但是onClick的函数是div2()，你给的函数是editDiv2XD
是的，这是一个错字...
你是如何调用你的函数的？
我在另一个正在运行的函数的末尾调用它

标签： javascript

【解决方案1】：

它对我有用：

display([{
  restaurant: {
    name: 'Restaurant Name'
  }
}], 'London')

function display(restaurantArr, name) {
  title.innerHTML = `<h2>Available restaurants in ${name}:`
  
  for (let items of restaurantArr) {
    console.log(items)

    main.innerHTML += `
      <div class="container">
          <p class="containerP">${items.restaurant.name}</p>
          <img onclick="editDiv2()" id="imageid" class="imgAdd" src="pngwave.png">
      </div>

      <div id="someid" class="container2">
          <p>Test</p>
          <p>Test</p>
          <p>Test</p>
      </div>
    `
  }
}



function editDiv2() {
  const div2 = document.querySelector('#someid')
  div2.style.color = "red";
}

<h2 id="title"></h2>
<div id="main"></div>

【讨论】：

是的，但我忘了显示 main.innerHTML 在函数内部，我现在更新了它
@Mr.Ulis 你怎么调用你的函数？
来自这个函数：async function getResturant(id, name){ const response = await fetch(https://developers.zomato.com/api/v2.1/search?entity_id=${id}&entity_type=city&q=*RESTAURANT_URL*&category=7%2C9, options); const data = await response.json() display(data.restaurants, name) } 这个函数是从一个按钮的 onclick 调用的
是的，但它只适用于第一个
。这是在一个循环中，所以有多个像这样的 div 和图像，但是只有第一个有效。
例如，如果我点击第三次迭代

【解决方案2】：

(function() {
    display()      
    clickEvent()    
})(); 

function display(){
        main = document.getElementById("div1")
    main.innerHTML = '<div class="container"><p class="containerP">${items.restaurant.name}</p><img id="imageid" class="imgAdd" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/330px-Image_created_with_a_mobile_phone.png"></div><div id="someid" class="container2"><p>Test</p><p>Test</p><p>Test</p></div>'
}

function clickEvent(){

    var image = document.getElementById("imageid")
        image.addEventListener("click", function(){
    const div2 = document.querySelector('.container2')
    div2.style.color = "red";
})

}

无论您在哪里调用显示函数，都可以为您的任务添加一个新函数并在显示下方调用它，以便它可以将 dom 元素注册到其点击事件列表器。

这是更新的小提琴。 https://jsfiddle.net/3h61jdfv/

【讨论】：

我不使用 jquery
stackoverflow.com/questions/40613527/…
以上链接是如何将此代码转换为 javascript 代码。让我现在拿一台电脑。我的手机可以处理了
如果我使用你给我的链接上的方法，我可以改变我点击的 e.target 的样式（img），但我不知道如何让它改变第二个 div 的样式，因为我不会点击它。基本上我希望在单击图像时改变 div2（第二个 div）样式。
jsfiddle.net/3h61jdfv 这是更新小提琴，您可以在文档准备功能中添加这两个功能

【解决方案3】：

由于这是动态创建的，因此您需要将事件动态添加到

为图像添加 ID

<img id="image" class="imgAdd" src="pngwave.png">

然后写一个点击函数

const image = document.getElementById("image")

image.addEventListener("click", function(){
    const div2 = document.querySelector('.div2')
    div2.style.color = "red";
})

【讨论】：

如果动态创建的元素处于循环中，这会起作用吗？
是的，应该的。但是querySelector只会改变第一个元素的样式，如果你需要改变all的样式那么你需要使用querySelectorAll

【解决方案4】：

<img onclick="div2()"

应该是

<img onclick="editDiv2()"

否则editDiv2函数将不会被调用。

【讨论】：

onclick="div2()" 是错字对不起，但不是问题