html代码中id="img_list" 是需要动态添加的容器，id="append"里面是静态元素，动态元素和静态元素通用css样式。其问题主要出在动态的所有 class="zhezhao"的节点样式(鼠标滑过时透明度变化)。 问题1：如何让动态元素 class="zhezhao"部分显示正确的样式？ 问题2：静态css样式大部分在动态元素上显示正常，但这样应用是否合理？就是说静态元素应用静态样式，动态元素应用动态样式为合理？

针对问题1，可以采用以下两种方法：

1. 使用事件委托的方式，在父元素上绑定事件，并在事件处理函数中获取目标元素的class为"zhezhao"的节点，再进行样式设置。

示例代码：

document.getElementById("img_list").addEventListener("mouseover", function(event) {
  if (event.target.classList.contains("zhezhao")) {
    event.target.style.opacity = "0.5";
  }
});
document.getElementById("img_list").addEventListener("mouseout", function(event) {
  if (event.target.classList.contains("zhezhao")) {
    event.target.style.opacity = "1";
  }
});

2. 在动态添加元素时，给class为"zhezhao"的节点添加一个新的class，例如"dynamic-zhezhao"，然后在CSS样式表中单独设置该class的样式。

示例代码：

// 动态添加元素时，给class为"zhezhao"的节点添加新的class
var imgList = document.getElementById("img_list");
var newElement = document.createElement("div");
newElement.classList.add("zhezhao", "dynamic-zhezhao");
imgList.appendChild(newElement);

// 在CSS样式表中单独设置dynamic-zhezhao的样式
.dynamic-zhezhao:hover {
  opacity: 0.5;
}

针对问题2，静态元素应用静态样式，动态元素应用动态样式是合理的。这样做的好处是，可以减少动态元素受到静态样式的干扰，保证动态元素的样式可以灵活地进行修改，而不会影响到静态元素的样式。同时，也可以提高代码的可维护性。