CSS stuff

1. CSS CLASSES MANAGEMENT

javascript

let elem = document.querySelector('.myDiv');
 
// METHOD 1: className (string manipulation)
elem.className = 'btn active large';        // Set all classes at once
elem.className += ' new-class';             // Add class (watch the space!)
elem.className = elem.className.replace('active', ''); // Remove class (messy)
 
// METHOD 2: classList (object methods) - PREFERRED!
elem.classList.add('active');               // Add single class
elem.classList.add('btn', 'large');         // Add multiple classes
elem.classList.remove('active');            // Remove class
elem.classList.toggle('active');            // Add if missing, remove if present
elem.classList.contains('active');          // Check if has class (returns true/false)
elem.classList.replace('old-class', 'new-class'); // Replace class

Machine Coding Pattern:

javascript

// Toggle button state
function toggleButton(btn) {
    if (btn.classList.contains('active')) {
        btn.classList.remove('active');
        btn.textContent = 'Click me';
    } else {
        btn.classList.add('active');
        btn.textContent = 'Active!';
    }
}
 
// Or simply:
btn.classList.toggle('active');

---

2. INLINE STYLES (style property)

javascript

let elem = document.querySelector('.box');
 
// SET INDIVIDUAL STYLES (most common in machine coding)
elem.style.color = 'red';
elem.style.backgroundColor = 'blue';        // CSS: background-color → backgroundColor
elem.style.fontSize = '16px';               // CSS: font-size → fontSize  
elem.style.borderRadius = '5px';            // CSS: border-radius → borderRadius
 
// COMMON STYLING TASKS
elem.style.display = 'none';                // Hide element
elem.style.display = 'block';               // Show element
elem.style.visibility = 'hidden';           // Hide but keep space
elem.style.opacity = '0.5';                 // Semi-transparent
 
// READ INLINE STYLES
let currentColor = elem.style.color;        // Only reads inline styles!

CSS Property Name Conversion:

javascript

// CSS property → JavaScript property
'background-color' → backgroundColor
'font-size' → fontSize  
'border-top-width' → borderTopWidth
'z-index' → zIndex

---

3. BULK STYLE CHANGES

javascript

let elem = document.querySelector('.box');
 
// SET MULTIPLE STYLES AT ONCE
elem.style.cssText = 'color: red; background: blue; font-size: 16px;';
 
// OR using Object.assign (cleaner)
Object.assign(elem.style, {
    color: 'red',
    backgroundColor: 'blue', 
    fontSize: '16px',
    padding: '10px'
});
 
// CLEAR ALL INLINE STYLES
elem.style.cssText = '';
// or
elem.removeAttribute('style');
```## **6. QUICK REFERENCE FOR MACHINE CODING**
 
**Most Used:**
 
javascript
 
```javascript
// Classes
elem.classList.add('class')      // Add class
elem.classList.remove('class')   // Remove class  
elem.classList.toggle('class')   // Toggle class
elem.classList.contains('class') // Check class
 
// Inline Styles  
elem.style.display = 'none'      // Hide
elem.style.color = 'red'         // Color
elem.style.backgroundColor = 'blue' // Background
 
// Reading Final Styles
getComputedStyle(elem).property  // Get actual rendered value

Common Gotchas:

javascript

// ❌ WRONG - reading style that wasn't set inline
if (elem.style.display === 'none') // Won't work if hidden via CSS
 
// ✅ RIGHT - reading computed style  
if (getComputedStyle(elem).display === 'none')
 
// ❌ WRONG - CSS syntax in JavaScript
elem.style.background-color = 'red'; // SyntaxError!
 
// ✅ RIGHT - camelCase in JavaScript  
elem.style.backgroundColor = 'red';

Bottom Line: Use classList for classes (cleaner), style.property for inline styles (immediate), getComputedStyle() for reading actual rendered values. This covers 90% of styling needs in machine coding rounds!