所以我试图创建一个新的Div，它具有与某个DIV相同的所有CSS属性。因此，尝试在单击时创建DIV，但是当我将子元素附加到父div时，什么都没有显示。使用appendChild时，它会自动使该元素成为要附加的元素的子元素，对吗？并且这样做不应该继承其所有属性吗？
let newBook = {}
function Book(title, author, pages, status) {
this.title = title;
this.author = author;
this.pages = pages;
this.status = status;
}
//Dom Accessed Variables
let addBook = document.getElementById("Add-Book")
let body = document.querySelector("Body")
let newBookForm = document.querySelector("Form")
let listedBooks = document.getElementById("Listed-Books")
addBook.addEventListener("click", function() {
let oneBook = document.createElement("div")
newBookForm.style.visibility = 'visible';
body.style.backgroundColor= 'orange, 0.1';
listedBooks.appendChild(oneBook)
})
function addBookToLibrary() {
newBook = new Book('Harry Potter and the Deathly Hallows', 'J.K Rowling', '759', 'reading');
}
#Listed-Books {
display: grid;
height: 75px;
width: 1200px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 4.5rem;
grid-row-gap: 1rem;
color: black;
border: 1px solid black;
}
^^因此，我希望在创建新的DIV时继承这些CSS属性，并将其附加到其后。
到目前为止，这是我的整个项目，有助于可视化。现在，我不太担心在窗体显示并用户单击SUBMIT之后创建DIV，因为Im只是试图使新的div显示与listBooks相同的属性。
你是这个意思吗？
const container = document.getElementById("listed-books-container");
function addBook() {
const listedBook = document.createElement('div');
listedBook.classList.add('listed-book');
container.append(listedBook);
}.listed-book {
display: grid;
height: 75px;
width: 1200px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 4.5rem;
grid-row-gap: 1rem;
color: black;
border: 1px solid black;
}<button onclick="addBook()">Add Book</button>
<div id="listed-books-container">
</div>如果是这样，请将CSS转换为一个类，并将其添加到新元素的类列表中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句