Dynamic Style Manipulation

Changing CSS styles with JavaScript - traditional vs modern approaches.

Traditional Approach

W3Schools Example

Change Style Example (See original)

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>

Try It

JavaScript can change the style of an HTML element.

Analysis

✓ Pros

  • Simple and straightforward
  • Code is visible directly in HTML
  • Easy to understand for beginners

✗ Cons

  • Inline onclick mixes HTML and JavaScript
  • Only changes one style property
  • Hard to modify or extend functionality
  • No separation of concerns
  • Cannot easily reverse the change

Modern Approach

Current Best Practices

Change Style Example

<!DOCTYPE html>
<html lang="en">
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" id="styleBtn">Apply Styles</button>
<button type="button" id="resetBtn">Reset Styles</button>

<script>
  const demoText = document.getElementById('demo');
  const styleButton = document.getElementById('styleBtn');
  const resetButton = document.getElementById('resetBtn');
  
  styleButton.addEventListener('click', () => {
    demoText.style.fontSize = '35px';
    demoText.style.color = '#0d6efd';
    demoText.style.fontWeight = 'bold';
    demoText.style.transition = 'all 0.3s ease';
  });
  
  resetButton.addEventListener('click', () => {
    demoText.style.fontSize = '';
    demoText.style.color = '';
    demoText.style.fontWeight = '';
  });
</script>
</body>
</html>

Try It

JavaScript can change the style of an HTML element.

Analysis

✓ Pros

  • Separates HTML and JavaScript (better organization)
  • Uses const for variables (modern ES6+ syntax)
  • Element references stored once, reused efficiently
  • Changes multiple style properties at once
  • Includes reset functionality to reverse changes
  • Arrow functions provide cleaner syntax
  • Adds transition for smooth visual effect

✗ Cons

  • More code to write initially
  • Requires understanding of event listeners
  • Multiple variable declarations needed

🎯 Key Takeaways

  • Style Manipulation: JavaScript can change any CSS property using element.style.propertyName
  • camelCase Conversion: CSS properties with hyphens become camelCase in JavaScript (e.g., font-size becomes fontSize)
  • Multiple Properties: Modern approach can change multiple styles at once for better visual effects
  • Reversibility: Setting a style property to an empty string removes the inline style
  • Transitions: Adding CSS transitions makes style changes smoother and more professional
  • Separation of Concerns: Keeping JavaScript separate from HTML makes code easier to maintain
  • Modern Syntax: Using const, addEventListener, and arrow functions follows current best practices

💡 Pro Tip:

For managing multiple style changes, consider using CSS classes instead of inline styles. Toggle classes with element.classList.add(), element.classList.remove(), or element.classList.toggle() for cleaner, more maintainable code!

🚀 Extra for Experts:

Want to see how to use CSS classes for even cleaner style management?