Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to inherit CSS properties of parent Element using JavaScript?
JavaScript provides several ways to make child elements inherit CSS properties from their parent elements. You can use classList.add() to apply CSS classes, or directly manipulate the style property to inherit specific styles.
Using classList.add() Method
The most common approach is creating elements and adding CSS classes that define inheritance rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inheritance Example</title>
<style>
.parent-container {
color: blue;
font-family: Arial, sans-serif;
font-size: 18px;
border: 2px solid blue;
padding: 20px;
margin: 10px;
}
.child-element {
/* These properties will inherit from parent */
color: inherit;
font-family: inherit;
font-size: inherit;
border: 1px solid red;
padding: 10px;
margin: 5px;
background-color: lightgray;
}
</style>
</head>
<body>
<button onclick="addChildElement()">Add Child Element</button>
<div id="parent" class="parent-container">
Parent Element - Click button to add child
</div>
<script>
function addChildElement() {
const parentDiv = document.getElementById("parent");
const childDiv = document.createElement('div');
childDiv.classList.add('child-element');
childDiv.textContent = 'Child Element - Inherits parent styles';
parentDiv.appendChild(childDiv);
}
</script>
</body>
</html>
Using Direct Style Inheritance
You can also programmatically inherit specific CSS properties using JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direct Style Inheritance</title>
<style>
.parent {
color: green;
font-size: 20px;
font-weight: bold;
padding: 15px;
border: 2px solid green;
}
</style>
</head>
<body>
<button onclick="inheritStyles()">Create Child with Inherited Styles</button>
<div id="parentElement" class="parent">
Parent Element
</div>
<script>
function inheritStyles() {
const parent = document.getElementById("parentElement");
const child = document.createElement('div');
// Get computed styles from parent
const parentStyles = window.getComputedStyle(parent);
// Apply inherited styles to child
child.style.color = parentStyles.color;
child.style.fontSize = parentStyles.fontSize;
child.style.fontWeight = parentStyles.fontWeight;
child.style.border = "1px solid orange";
child.style.padding = "10px";
child.style.margin = "10px 0";
child.textContent = 'Child with inherited styles';
parent.appendChild(child);
}
</script>
</body>
</html>
CSS Inheritance Methods Comparison
| Method | Use Case | Advantages |
|---|---|---|
classList.add() |
Predefined CSS classes | Clean, reusable, maintainable |
style.property = 'inherit' |
Dynamic inheritance | Flexible, programmatic control |
getComputedStyle() |
Copy specific values | Precise control over inherited properties |
Key CSS Properties That Inherit
Some CSS properties naturally inherit from parent elements:
-
Text properties:
color,font-family,font-size,font-weight -
List properties:
list-style,list-style-type -
Table properties:
border-collapse,border-spacing
Properties like margin, padding, border, and background do not inherit by default and must be explicitly set.
Conclusion
Use classList.add() with CSS classes containing inherit values for the cleanest approach. For dynamic inheritance, combine getComputedStyle() with direct style assignment to copy specific parent properties to child elements.
487 Views
