如何使用 JavaScript 继承父元素的 CSS 属性？答案

【问题标题】：How to inherit CSS properties of parent Element using JavaScript?如何使用 JavaScript 继承父元素的 CSS 属性？
【发布时间】：2020-07-08 20:21:05
【问题描述】：

所以我试图在单击按钮后创建一个具有与某个 DIV 相同的所有 CSS 属性的新 Div。所以尝试在单击时创建一个 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 属性，并附加到它。

到目前为止，这是我的整个项目，以帮助进行可视化。现在我不太关心在表单显示和用户点击提交后创建一个 DIV，因为我只是想让新的 div 显示与列出的书籍相同的属性。

https://jsfiddle.net/Jbautista1056/ungkL5a0/1/

【问题讨论】：

标签： javascript css inheritance constructor

【解决方案1】：

这是你的意思吗？

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变成一个类，并将其添加到新元素的类列表中。

【讨论】：