The style property
Every element has a style property that lets you change its CSS directly:
const title = document.querySelector("#title");
title.style.color = "purple";
title.style.backgroundColor = "lightyellow";
title.style.fontSize = "48px";
title.style.padding = "10px";Notice that CSS properties with hyphens, like background-color and font-size, become camelCase in JavaScript: backgroundColor, fontSize. (A hyphen would be read as a minus sign!) Also, the values are always strings, including units like "48px".
classList: the better way
Changing styles one by one gets messy fast. A much cleaner approach is to define your styles in CSS classes, and use JavaScript to add or remove those classes. Every element has a classList with handy methods:
const intro = document.querySelector(".intro");
intro.classList.add("highlight"); // add a class
intro.classList.remove("highlight"); // remove a class
intro.classList.toggle("highlight"); // add it if it's missing, remove it if it's there
console.log(intro.classList.contains("highlight")); // true or falseOur practice page has a .highlight class (yellow background) and a .hidden class (display: none, which makes an element disappear). So hiding and showing things is as easy as:
const photo = document.querySelector("#photo");
photo.classList.add("hidden"); // poof! gone
photo.classList.remove("hidden"); // and it's backRemember the house analogy from Preschool? CSS is the decoration, JavaScript is the electricity. Let each one do its own job. Put how things look in CSS classes, and let JavaScript just switch the classes on and off. Your code will be much easier to change later. Want the highlight to be pink instead of yellow? Change one line of CSS, and every highlight everywhere updates.