如何编辑待创建的template-clone对象样式？克隆样式修改报错解决

错误根源 #

你遇到的问题是因为：template.content.cloneNode(true)返回的是DocumentFragment（文档片段），这个对象本身没有style属性，直接访问template_clone.style会得到undefined，进而报错。

另外代码里还有个小问题：HTML里按钮的class是send，但JS里用document.querySelector(".button")，根本找不到按钮，点击事件不会触发，这个也要一起修正。

正确修改样式的两种方法 #

方法1：直接修改片段内的目标元素样式

克隆文档片段后，先通过querySelector找到片段里的.box1元素，再修改它的样式：

document.addEventListener("DOMContentLoaded", ()=>{
    let template = document.querySelector(".template");
    // 修正按钮选择器，对应HTML里的send类
    let button = document.querySelector(".send");
    let screen = document.querySelector(".screen");
    button.addEventListener("click", ()=>{
        let template_clone = template.content.cloneNode(true);
        // 找到片段里的box1元素，再修改样式
        let box = template_clone.querySelector(".box1");
        box.style.background = "red";
        screen.appendChild(template_clone);
    })
})

方法2：通过CSS类控制样式（更推荐）

这种方式符合样式与逻辑分离的原则，先在CSS里定义类，再给片段内的元素添加类：

/* 先在样式表定义类 */
.red-bg {
    background: red;
}

document.addEventListener("DOMContentLoaded", ()=>{
    let template = document.querySelector(".template");
    let button = document.querySelector(".send");
    let screen = document.querySelector(".screen");
    button.addEventListener("click", ()=>{
        let template_clone = template.content.cloneNode(true);
        let box = template_clone.querySelector(".box1");
        // 添加预定义的CSS类
        box.classList.add("red-bg");
        screen.appendChild(template_clone);
    })
})

修正后的HTML（仅确保按钮class与JS对应即可） #

<body>
    <button class="send">send</button>
    <div class="screen">
        <template class="template">
            <div class="box1"></div>
        </template>
    </div>       
</body>

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