CODEWITHSUNDEEP
javascriptcssinheritanceconstructor
Josemari Bautista
Josemari Bautista

Reputation: 87

How to inherit CSS properties of parent Element using JavaScript?

So Im trying to create a new Div with all the same CSS properties as a certain DIV once a button is clicked. So tried creating a DIV when clicked, but when I append the child element to the parent div nothing shows up. When using appendChild it automatically makes that element the child of whatever it is being appended to, correct? And in doing so shouldn't it inherit all its properties?



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;
}

^^So I want these CSS properties to be inherited when I create new DIV, and append to it.

Here's my entire project so far to help visualize. Right now I'm not too concerned with creating a DIV after the form shows up and user clicks SUBMIT, because Im just trying to get the new div to show up with the same properties as listedBooks.

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

Upvotes: 1

Views: 488

Answers (1)

Pavlos Karalis
Pavlos Karalis

Reputation: 2966

Is this what you mean?

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>

If so, turn the css into a class and add it to the class list of the new element.

Upvotes: 1

Related Questions