document.addEventListener("DOMContentLoaded", ()=>{
let template = document.querySelector(".template");
let button = document.querySelector(".button");
let screen = document.querySelector(".screen");
button.addEventListener("click", ()=>{
let template_clone = template.content.cloneNode(true);
template_clone.style.background = "red";
screen.appendChild(template_clone)
})})
我需要将一个对象添加到屏幕上，该对象是模板克隆并编辑其样式
<body>
<button class="send">send</button>
<div class="screen">
<template class="template">
<div class="box1"></div>
</template>
</div>
</body>
如果我尝试编辑 template_clone.style 样式，则会导致错误
undefined is not an object (evaluating 'template_clone.style.background = "red"')
发生错误的原因是
template.content.cloneNode(true)div.box1template_clonestyle要修改克隆内容中元素的样式，您需要访问克隆片段中的特定元素。
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 box1 = template_clone.querySelector(".box1"); // Access the element inside the clone
box1.style.background = "red"; // Modify the style of the element inside the clone
screen.appendChild(template_clone); // Append the clone to the screen
});
});