使用动态创建的DOM元素在单击时添加样式

动态创建的DOM元素是指通过JavaScript代码在网页中创建新的HTML元素。在单击这些动态创建的DOM元素时，可以通过添加样式来改变它们的外观。

添加样式可以通过修改DOM元素的class属性来实现。class属性可以定义一个或多个样式类，每个样式类可以包含一组CSS样式规则。通过为动态创建的DOM元素添加一个或多个样式类，可以改变它们的外观。

以下是一个示例代码，演示如何使用动态创建的DOM元素在单击时添加样式：

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight {
        background-color: yellow;
    }
</style>
</head>
<body>

<button onclick="addStyle()">添加样式</button>

<script>
function addStyle() {
    // 创建一个新的div元素
    var newDiv = document.createElement("div");
    
    // 设置div元素的文本内容
    var textNode = document.createTextNode("这是一个动态创建的元素");
    newDiv.appendChild(textNode);
    
    // 为div元素添加样式类
    newDiv.classList.add("highlight");
    
    // 将新的div元素添加到页面中
    document.body.appendChild(newDiv);
}
</script>

</body>
</html>

在上面的示例中，当点击"添加样式"按钮时，会创建一个新的div元素，并为其添加一个名为"highlight"的样式类。这个样式类定义了一个黄色的背景颜色。新创建的div元素将被添加到页面的body元素中，并显示出黄色的背景色。

这个例子中使用了JavaScript的createElement、createTextNode和appendChild方法来创建和添加新的DOM元素。通过classList的add方法，可以为新创建的元素添加样式类。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），腾讯云云函数（SCF），腾讯云云数据库MySQL版（CDB），腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm

腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf

腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql

腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos