如何使用JavaScript选择拆分得到的DOM元素并进行样式操作

方案1：生成DOM时直接处理（推荐，性能最优） #

你原有代码每次循环都会重复执行split操作，建议先把拆分结果缓存下来，在循环生成p标签时直接匹配目标索引，给对应元素加样式即可，示例代码如下：

function displayAlignment(data) {
    let html = "";
    html += `<h3>Alignments</h3>`
    // 缓存拆分结果，避免重复计算
    const descLines = data.results[1].desc.split(/\n/);
    for (let i = 0; i < descLines.length; i++) {
        // 匹配目标索引（注意数组从0开始计数，第5行对应索引4）
        if (i === 4) {
            // 直接加内联样式，也可以加自定义类通过CSS统一定义样式
            html += `<p style="color: #ff0000; font-size: 18px;">${descLines[i]}</p>`
            // 加自定义类写法：html += `<p class="highlight-line">${descLines[i]}</p>`
        } else {
            html += `<p>${descLines[i]}</p>`
        }
    }
    document.querySelector(`.content-text`).innerHTML = html
}

如果需要操作多个特定元素，只需要把目标索引存入数组，循环判断当前索引是否在目标数组中即可。

方案2：DOM生成后查询对应元素操作 #

如果不方便修改生成DOM的逻辑，可以在DOM渲染完成后，按索引选中对应p标签修改样式：

// 确保在displayAlignment执行完成、DOM渲染后再执行以下代码
const allLineP = document.querySelectorAll('.content-text p')
const targetLine = allLineP[4]
// 做非空判断避免索引不存在报错
if (targetLine) {
    targetLine.style.color = '#ff0000'
    targetLine.style.fontSize = '18px'
}

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