Как наследовать CSS свойств родительского элемента, используя JavaScript?

Question

Итак, я пытаюсь создать новый 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;
}

^^ Итак, я хочу, чтобы эти CSS свойства были унаследованы при создании нового DIV и добавлялись к нему.

Вот мой весь мой проект по визуализации. Прямо сейчас я не слишком озабочен созданием DIV после того, как форма появится и пользователь щелкнет ОТПРАВИТЬ, потому что я просто пытаюсь заставить новый div отображаться с теми же свойствами, что и перечисленные книги.

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

Answer 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 в класс и добавьте его в список классов нового элемента.