JavaScript DOM CSS

Subject: JavaScript

JavaScript can access and modify the CSS styles of HTML elements dynamically using the .style property. CSS property names in JavaScript use camelCase notation (e.g., backgroundColor instead of background-color).

Example 1: Change Background Color with Button Click

Example 2: Toggle Visibility Using display Property

Example 3: Add Dynamic Styling on Mouseover

Key Takeaways

  • Use element.style.propertyName to apply styles dynamically.
  • Use camelCase for CSS properties in JavaScript (e.g., fontSize, backgroundColor).
  • Show or hide elements by changing their display or visibility properties.
  • CSS changes via JavaScript affect inline styles only.
Next : DOM Animation