DOM style manipulation

DOM style manipulation is an indispensable part of front-end development. Dynamically modifying element styles through JavaScript enables rich interactive effects. From basic style property adjustments to complex animation control, DOM style manipulation offers various methods to meet the needs of different scenarios.

Inline Style Manipulation

The style property of an element allows direct reading and writing of inline styles. Styles modified this way have the highest priority and will override rules from external and internal style sheets.

const element = document.getElementById('myElement');

// Set a single style
element.style.color = 'red';

// Set multiple styles
element.style.cssText = 'background: blue; font-size: 20px;';

// Get a style value
const currentColor = element.style.color;

Note that CSS property names in JavaScript must use camelCase:

element.style.backgroundColor = '#f0f0f0';  // Corresponds to CSS's background-color
element.style.zIndex = '10';  // Corresponds to CSS's z-index

Class Name Manipulation

Modifying the classList property of an element allows for more efficient management of multiple style classes.

const box = document.querySelector('.box');

// Add classes
box.classList.add('active', 'highlight');

// Remove classes
box.classList.remove('inactive');

// Toggle classes
box.classList.toggle('hidden');

// Check if a class exists
if (box.classList.contains('active')) {
  console.log('The element is in an active state');
}

Computed Style Retrieval

To retrieve the final applied styles of an element (including inherited styles and those from style sheets), use the getComputedStyle method:

const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);

// Get computed style values
const marginTop = computedStyle.marginTop;
const fontSize = computedStyle.fontSize;

console.log(`Element font size: ${fontSize}, top margin: ${marginTop}`);

Style Sheet Manipulation

JavaScript can also directly manipulate CSS style sheets for more global style modifications.

// Get the first style sheet
const styleSheet = document.styleSheets[0];

// Add a new rule
styleSheet.insertRule('.new-class { color: green; }', styleSheet.cssRules.length);

// Delete a rule
styleSheet.deleteRule(0);

// Modify an existing rule
if (styleSheet.cssRules[0].selectorText === '.old-class') {
  styleSheet.cssRules[0].style.backgroundColor = 'yellow';
}

Animation Style Control

Combining CSS variables with JavaScript enables more flexible animation control:

:root {
  --rotate-degree: 0deg;
}

.spinner {
  transform: rotate(var(--rotate-degree));
  transition: transform 0.5s ease;
}

const spinner = document.querySelector('.spinner');
let degree = 0;

function animate() {
  degree += 10;
  document.documentElement.style.setProperty('--rotate-degree', `${degree}deg`);
  requestAnimationFrame(animate);
}

animate();

Performance Optimization Tips

Frequent DOM style manipulations can trigger reflows and repaints, impacting performance. Here are some optimization techniques:

1. When batch-modifying styles, first remove the element from the document flow:

const element = document.getElementById('heavy-element');
element.style.display = 'none';

// Batch-modify styles
element.style.width = '100px';
element.style.height = '200px';
element.style.backgroundColor = 'red';

element.style.display = 'block';

2. Use requestAnimationFrame for animation-related style modifications:

function animate() {
  const element = document.getElementById('animated-element');
  let position = 0;
  
  function step() {
    position += 1;
    element.style.left = `${position}px`;
    
    if (position < 100) {
      requestAnimationFrame(step);
    }
  }
  
  requestAnimationFrame(step);
}

3. For complex animations, consider using CSS animations or transforms instead of directly modifying positional properties:

// Not recommended
element.style.left = `${x}px`;
element.style.top = `${y}px`;

// Recommended
element.style.transform = `translate(${x}px, ${y}px)`;

Responsive Style Adjustments

Dynamically adjust styles based on browser conditions:

function adjustLayout() {
  const container = document.getElementById('container');
  
  if (window.innerWidth < 768) {
    container.style.flexDirection = 'column';
    container.style.padding = '10px';
  } else {
    container.style.flexDirection = 'row';
    container.style.padding = '20px';
  }
}

// Initial adjustment
adjustLayout();

// Re-adjust on window resize
window.addEventListener('resize', adjustLayout);

Pseudo-Element Style Modification

Although pseudo-elements cannot be directly accessed via JavaScript, they can be indirectly controlled using CSS variables:

.tooltip::after {
  content: var(--tooltip-content);
  background-color: var(--tooltip-bg, #333);
  color: var(--tooltip-color, white);
}

const tooltip = document.querySelector('.tooltip');
tooltip.style.setProperty('--tooltip-content', '"This is a dynamic tooltip"');
tooltip.style.setProperty('--tooltip-bg', 'red');

Practical Applications of Style Manipulation

Implementing a draggable modal:

<div class="modal" id="myModal">
  <div class="modal-header" id="modalHeader">Title</div>
  <div class="modal-content">Content...</div>
</div>

const modal = document.getElementById('myModal');
const header = document.getElementById('modalHeader');
let isDragging = false;
let offsetX, offsetY;

header.addEventListener('mousedown', (e) => {
  isDragging = true;
  const rect = modal.getBoundingClientRect();
  offsetX = e.clientX - rect.left;
  offsetY = e.clientY - rect.top;
  
  modal.style.position = 'absolute';
  modal.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  modal.style.left = `${e.clientX - offsetX}px`;
  modal.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  modal.style.cursor = '';
});

Browser Compatibility Handling

Different browsers may require different style property prefixes:

function setTransform(element, value) {
  const prefixes = ['', 'webkit', 'moz', 'ms', 'o'];
  prefixes.forEach(prefix => {
    const property = prefix ? `${prefix}Transform` : 'transform';
    element.style[property] = value;
  });
}

const box = document.getElementById('animated-box');
setTransform(box, 'rotate(45deg)');

Style Manipulation in Frameworks

In modern front-end frameworks, DOM style manipulation is typically handled through framework-specific mechanisms, but understanding the underlying principles remains important.

React style manipulation example:

function ColoredBox() {
  const [color, setColor] = useState('red');
  
  return (
    <div 
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: color,
        transition: 'background-color 0.3s'
      }}
      onClick={() => setColor(color === 'red' ? 'blue' : 'red')}
    />
  );
}

Vue style manipulation example:

<template>
  <div 
    :style="{
      width: size + 'px',
      height: size + 'px',
      backgroundColor: active ? 'green' : 'gray'
    }"
    @click="toggle"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      size: 100,
      active: false
    }
  },
  methods: {
    toggle() {
      this.active = !this.active;
      this.size += 10;
    }
  }
}
</script>