- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to inherit CSS properties of parent Element using JavaScript?
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
<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 −
Advertisements