如何获取页面加载时生成的动态元素并修改其属性？

一、服务器端修改（渲染前操作） #

你当前用字符串拼接HTML的方式，生成的内容对服务器端来说只是纯文本，无法直接通过服务器端API定位子元素。可以通过两种方式处理：

1. 拼接字符串时直接修改 #

在构建HTML字符串的阶段，根据需求给目标div添加或修改属性。比如要给id为"1"的div加高亮样式：

string textToDiv = "";
for (int num = 1; num <= 2; num++)
{
    // 针对目标div添加自定义属性
    string extraAttrs = num == 1 ? "class='highlight' style='color:red'" : "";
    textToDiv += $"<div id='{num}' {extraAttrs}><ul><li></li><li></li></ul></div>";
}
master.InnerHtml = textToDiv;

2. 使用服务器控件动态创建（更灵活） #

放弃字符串拼接，改用HtmlGenericControl创建元素，这样所有子元素都会成为服务器端可控的对象，后续可以直接查找并修改：

// 先清空master的原有内容
master.Controls.Clear();

for (int num = 1; num <= 2; num++)
{
    // 创建子div控件
    HtmlGenericControl childDiv = new HtmlGenericControl("div");
    childDiv.ID = num.ToString();

    // 创建ul和li控件
    HtmlGenericControl ul = new HtmlGenericControl("ul");
    ul.Controls.Add(new HtmlGenericControl("li"));
    ul.Controls.Add(new HtmlGenericControl("li"));
    childDiv.Controls.Add(ul);

    // 将子div添加到master中
    master.Controls.Add(childDiv);
}

// 查找目标div并修改属性
HtmlGenericControl targetDiv = master.FindControl("1") as HtmlGenericControl;
if (targetDiv != null)
{
    targetDiv.Attributes["class"] = "active";
    targetDiv.Style["background-color"] = "#eee";
}

二、客户端修改（渲染后操作） #

如果页面已经加载到浏览器，直接用JavaScript的document.getElementById()就能定位子div并修改属性，和静态页面操作完全一致：

// 定位id为"1"的div
const targetDiv = document.getElementById("1");
if (targetDiv) {
    // 修改class属性
    targetDiv.classList.add("highlight");
    // 修改样式
    targetDiv.style.border = "1px solid blue";
    // 添加自定义属性
    targetDiv.setAttribute("data-status", "processed");
}

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