Google Apps Script中动态创建元素条件样式设置失效问题

你的代码无法正常修改样式的核心原因是循环创建的所有卡片都使用了重复的ID（比如persona、condicion）。在DOM规范中，ID必须是唯一的，document.getElementById()只会返回页面中第一个匹配该ID的元素，所以只有第一个卡片的样式会被修改，后续卡片的样式调整完全无效。

下面是两种可行的修复方案：

方案一：基于类选择器，通过当前卡片元素定位子节点 #

把原来的ID替换成类，然后在调用样式修改函数时，传入当前创建的卡片div，通过div查找对应的子元素，确保修改的是当前卡片的内容：

document.addEventListener('DOMContentLoaded', function() {
    google.script.run.withSuccessHandler(buildLlamadas).getListLlamadas();

    function buildLlamadas(llamada){
      llamada.forEach(element => {
        var div = document.createElement('div');
        div.className = 'cardLlamada';
        // 把原来的id换成class
        div.innerHTML = "<p class='fecha'>" +element[0]
                      +"</p><p class='persona'>"+element[1]
                      +"<span class='condicion material-symbols-rounded'>"
                      +"fiber_manual_record</span>"
                      +"</p><p class='solicitud'>"+element[2]
                      +"</p><p class='respuesta'>"+element[5]
                      +"</p><ul class='menuLlamada'>"
                      +"<li>ARCHIVAR</li>"
                      +"<li class='editarLlamada material-symbols-outlined'>"
                      +"<span>editar</span>edit_square</li>"
                      +"<li class='borrarLlamada material-symbols-outlined'>"
                      +"<span>borrar</span>delete</li>"; 
        document.getElementById("dashBoard").appendChild(div);
        // 传入当前的div和条件值
        condicionPersona(div, element[3]);
      });
    }

    function condicionPersona(cardDiv, condicion){
      const personaEl = cardDiv.querySelector('.persona');
      const condicionEl = cardDiv.querySelector('.condicion');
      if(condicion == 'Cliente'){
        personaEl.style.color = "#17B833";
      }else if(condicion == 'Prospecto'){
        personaEl.style.color = "#742EF1";
        condicionEl.style.visibility="visible";
      }
    }
  }, false);

方案二：在构建HTML时直接注入样式逻辑 #

如果不想额外调用函数，也可以在拼接innerHTML的时候，根据条件直接添加对应的样式或类：

document.addEventListener('DOMContentLoaded', function() {
    google.script.run.withSuccessHandler(buildLlamadas).getListLlamadas();

    function buildLlamadas(llamada){
      llamada.forEach(element => {
        const condicion = element[3];
        // 根据条件生成persona的样式和condicion的可见性
        const personaColor = condicion === 'Cliente' ? '#17B833' : '#742EF1';
        const condicionVisibility = condicion === 'Prospecto' ? 'visible' : 'hidden';
        
        var div = document.createElement('div');
        div.className = 'cardLlamada';
        div.innerHTML = `<p class='fecha'>${element[0]}</p>
                        <p class='persona' style="color: ${personaColor}">${element[1]}
                        <span class='condicion material-symbols-rounded' style="visibility: ${condicionVisibility}">fiber_manual_record</span>
                        </p>
                        <p class='solicitud'>${element[2]}</p>
                        <p class='respuesta'>${element[5]}</p>
                        <ul class='menuLlamada'>
                        <li>ARCHIVAR</li>
                        <li class='editarLlamada material-symbols-outlined'><span>editar</span>edit_square</li>
                        <li class='borrarLlamada material-symbols-outlined'><span>borrar</span>delete</li></ul>`; 
        document.getElementById("dashBoard").appendChild(div);
      });
    }
  }, false);

这两种方案都能解决你遇到的问题，推荐方案一，结构更清晰，也便于后续维护样式逻辑。

内容的提问来源于stack exchange，提问作者Karen Lewis