How to inherit CSS properties of parent Element using JavaScript?

JavascriptWeb DevelopmentObject Oriented Programming

You can use classList.add() along with append(). Use the document.createElement() to create a new div and the classList.add() would add the CSS class.(.class selector).

Example

 Live Demo

<html lang="en>
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
   .add-all-subject {
      display: grid;
      height: 100px;
      width: 100px;
      grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
      grid-template-rows: 2fr;
      grid-column-gap: 5.9rem;
      grid-row-gap: 2rem;
      color: red;
      border: 2px solid red;
   }
</style>
</head>
<body>
<button onclick="saveAllSubjects()">Add Subjects</button>
<div id="add-subject">
</div>
<script>
   const addSubjectArea = document.getElementById("add-subject");
   function saveAllSubjects() {
      const allSubject = document.createElement('div');
      allSubject.classList.add('add-all-subject');
      addSubjectArea.append(allSubject);
   }
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

When you click the button “Add Subjects” then you will get following output.

This will produce the following output −

raja
Updated on 01-Sep-2020 12:23:55

Advertisements