JavaScript DOM CSS
Changing styles and CSS properties with JavaScript
🎨 What is DOM CSS Manipulation?
DOM CSS manipulation means changing the appearance of HTML elements using JavaScript. You can modify colors, sizes, positions, and any other CSS property dynamically!
// Change element styles
let element = document.getElementById("myDiv");
element.style.color = "red";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";
Common CSS Properties
Colors
Change text and background colors
element.style.color = "blue"Size
Change width, height, and font size
element.style.width = "200px"Position
Change margins, padding, and position
element.style.margin = "10px"Visibility
Show, hide, or change opacity
element.style.display = "none"🔹 Changing Colors
Colors are the most common CSS properties to change:
<div id="colorDemo">Change my colors!</div>
<button onclick="changeTextColor()">Change Text Color</button>
<button onclick="changeBackgroundColor()">Change Background</button>
<button onclick="resetColors()">Reset</button>
<script>
function changeTextColor() {
let element = document.getElementById("colorDemo");
element.style.color = "white";
}
function changeBackgroundColor() {
let element = document.getElementById("colorDemo");
element.style.backgroundColor = "darkblue";
element.style.padding = "15px";
element.style.borderRadius = "8px";
}
function resetColors() {
let element = document.getElementById("colorDemo");
element.style.color = "black";
element.style.backgroundColor = "transparent";
element.style.padding = "0";
element.style.borderRadius = "0";
}
</script>Try it:
Change my colors!
🔹 Changing Sizes
You can change the size of elements and text:
let element = document.getElementById("myElement");
// Change text size
element.style.fontSize = "24px";
element.style.fontWeight = "bold";
// Change element size
element.style.width = "300px";
element.style.height = "150px";
// Change border
element.style.border = "3px solid red";
element.style.borderRadius = "10px";🔸 Interactive Size Changer:
<div id="sizeDemo">Resize me!</div>
<button onclick="makeBigger()">Make Bigger</button>
<button onclick="makeSmaller()">Make Smaller</button>
<button onclick="resetSize()">Reset Size</button>
<script>
let currentSize = 16; // Starting font size
function makeBigger() {
currentSize += 4;
let element = document.getElementById("sizeDemo");
element.style.fontSize = currentSize + "px";
element.style.padding = (currentSize / 2) + "px";
}
function makeSmaller() {
if (currentSize > 12) { // Don't go too small
currentSize -= 4;
let element = document.getElementById("sizeDemo");
element.style.fontSize = currentSize + "px";
element.style.padding = (currentSize / 2) + "px";
}
}
function resetSize() {
currentSize = 16;
let element = document.getElementById("sizeDemo");
element.style.fontSize = currentSize + "px";
element.style.padding = (currentSize / 2) + "px";
}
</script>Try it:
Resize me!
🔹 Show and Hide Elements
Control element visibility with display and visibility properties:
let element = document.getElementById("myElement");
// Hide element completely (removes from layout)
element.style.display = "none";
// Show element again
element.style.display = "block"; // or "inline", "flex", etc.
// Hide element but keep its space
element.style.visibility = "hidden";
// Show element again
element.style.visibility = "visible";🔸 Hide/Show Example:
<div id="hideShowDemo">
<h4>I can be hidden!</h4>
<p>This is some content that can disappear and reappear.</p>
</div>
<button onclick="hideElement()">Hide</button>
<button onclick="showElement()">Show</button>
<button onclick="toggleElement()">Toggle</button>
<script>
function hideElement() {
document.getElementById("hideShowDemo").style.display = "none";
}
function showElement() {
document.getElementById("hideShowDemo").style.display = "block";
}
function toggleElement() {
let element = document.getElementById("hideShowDemo");
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>Try it:
I can be hidden!
This is some content that can disappear and reappear.
🔹 CSS Property Names in JavaScript
CSS properties with hyphens become camelCase in JavaScript:
CSS → JavaScript Property Names:
-
background-color
→
backgroundColor -
font-size
→
fontSize -
margin-top
→
marginTop -
border-radius
→
borderRadius -
text-align
→
textAlign
let element = document.getElementById("myElement");
// Correct JavaScript property names
element.style.backgroundColor = "yellow";
element.style.fontSize = "18px";
element.style.marginTop = "20px";
element.style.borderRadius = "5px";
element.style.textAlign = "center";🔹 Advanced CSS Manipulation
Working with CSS classes and computed styles:
let element = document.getElementById("myElement");
// Add CSS class
element.classList.add("highlight");
// Remove CSS class
element.classList.remove("old-style");
// Toggle CSS class
element.classList.toggle("active");
// Check if class exists
if (element.classList.contains("highlight")) {
console.log("Element has highlight class");
}
// Get computed style (current actual style)
let computedStyle = window.getComputedStyle(element);
let currentColor = computedStyle.color;
console.log("Current color:", currentColor);🔸 Theme Switcher Example:
<style>
.light-theme {
background-color: white;
color: black;
padding: 20px;
border: 1px solid #ccc;
}
.dark-theme {
background-color: #333;
color: white;
padding: 20px;
border: 1px solid #666;
}
</style>
<div id="themeDemo" class="light-theme">
<h4>Theme Switcher Demo</h4>
<p>This content changes theme!</p>
</div>
<button onclick="switchTheme()">Switch Theme</button>
<script>
function switchTheme() {
let element = document.getElementById("themeDemo");
if (element.classList.contains("light-theme")) {
element.classList.remove("light-theme");
element.classList.add("dark-theme");
} else {
element.classList.remove("dark-theme");
element.classList.add("light-theme");
}
}
</script>Try it:
Theme Switcher Demo
This content changes theme!