JS Styles
Manipulating CSS Styles with JavaScript
JavaScript allows you to change, add, and remove styles dynamically using the .style
property, classList
, and CSS stylesheets.
Changing Styles with .style
You can directly modify an element’s style using .style.property
.
Example: Change Background Color
<p id=”myPara”>This is a paragraph.</p>
<button onclick=”changeStyle()”>Change Style</button>
<script>
function changeStyle() {
document.getElementById(“myPara”).style.color = “red”;
document.getElementById(“myPara”).style.fontSize = “20px”;
document.getElementById(“myPara”).style.backgroundColor = “yellow”;
}
</script>
This is a paragraph.
Adding & Removing CSS Classes
Instead of modifying individual styles, use classList
to apply predefined CSS classes.
Example: Toggle Dark Mode
<style>
.dark-mode {
background-color: black;
color: white;
padding: 10px;
}
</style>
<p id=”para”>Click the button to toggle dark mode.</p>
<button onclick=”toggleMode()”>Toggle Dark Mode</button>
<script>
function toggleMode() {
document.getElementById(“para”).classList.toggle(“dark-mode”);
}
</script>
Click the button to toggle dark mode.
Changing Multiple Elements’ Styles
Use querySelectorAll()
to style multiple elements at once.
Example: Change All Paragraphs’ Colors
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button onclick=”changeAll()”>Change All Colors</button>
<script>
function changeAll() {
document.querySelectorAll(“p”).forEach(p => p.style.color = “blue”);
}
</script>
Paragraph 1
Paragraph 2
Paragraph 3
Changing Styles from External CSS
Modify an external CSS rule dynamically.
Example: Change CSS Variable (Custom Property)
<style>
:root {
–main-color: blue;
}
p {
color: var(–main-color);
}
</style>
<p>This paragraph uses a CSS variable.</p>
<button onclick=”changeCSS()”>Change Variable</button>
<script>
function changeCSS() {
document.documentElement.style.setProperty(“–main-color”, “red”);
}
</script>
This paragraph uses a CSS variable.
Reset Styles
You can remove inline styles using .style.removeProperty()
.
Example: Reset Styles
<p id=”resetPara” style=”color: red; font-size: 20px;”>Styled text</p>
<button onclick=”resetStyle()”>Reset Style</button>
<script>
function resetStyle() {
document.getElementById(“resetPara”).style.removeProperty(“color”);
document.getElementById(“resetPara”).style.removeProperty(“font-size”);
}
</script>
Styled text