我如何修改动态生成的HTML元素的样式

how i can modify style of html element generated dinamically?

本文关键字：HTML 样式 元素 动态 何修改 修改      更新时间：2023-09-26

我有这个代码：

function createfunc(i) {
    return function() {
        document.getElementById('id'+i).style.color='red';
        document.getElementById('id'+i).innerHTML = "Paragraph changed!";
    } 
}
function onDeviceReady() {   
    var olnew = document.createElement("ul");
    for (i = 0; i < 10; i++){
        var newLi = document.createElement("li");
        var title = document.createElement('h2');
        title.id="id"+i;
        title.innerHTML = i;
        newLi.appendChild(title);
        newLi.onclick =createfunc(i);
        olnew.appendChild(newLi);
    }
}

但是当我单击li元素时，它不会更改颜色或文本

非常感谢

更新

原始代码是：

<html>
  <head>
    <script>
        function createfunc(i) {
        return function() {
           document.getElementById('id'+i).style.color='red';
           document.getElementById('id'+i).innerHTML = "Paragraph changed!";
                          } 
                               }
        function onDeviceReady() {   
           var olnew = document.getElementById('ordenes');
           for (i = 0; i < 10; i++){
               var newLi = document.createElement("li");
               var title = document.createElement('h2');
               title.id="id"+i;
               title.innerHTML = i;
               newLi.appendChild(title);
               newLi.onclick =createfunc(i);
               olnew.appendChild(newLi);
                                   }
                   }
      </script>
    </head>
    <body onload="onDeviceReady();">
        <div id="layout">
            <ul id="ordenes" ></ul>
        </div>
    </body>
</html>

当我点击 li 时，没有变化，li 元素有 id，但不起作用

不要维护ID属性，而是在handler-function中使用this上下文来表示调用事件Element，并使用querySelector来选择元素的child。

function createfunc() {
  this.querySelector('h2').style.color = 'red';
  this.querySelector('h2').innerHTML = "Paragraph changed!";
}
function onDeviceReady() {
  var olnew = document.getElementById('ordenes');
  for (var i = 0; i < 10; i++) {
    var newLi = document.createElement("li");
    var title = document.createElement('h2');
    title.innerHTML = i;
    newLi.appendChild(title);
    newLi.onclick = createfunc;
    olnew.appendChild(newLi);
  }
}
<body onload="onDeviceReady();">
  <div id="layout">
    <ul id="ordenes"></ul>
  </div>
</body>

相关文章：