3.3 Manipulating CSS

To change the CSS properties of an element, follow this syntax:

document.getElementById(id).style.property = new value

For example, say we want to change the text color, font-family, and font-weight of a paragraph tag with id = “p1”:


let p1 = document.getElementById(“p1”);
p1.style.color = “blue”;
p1.style.fontFamily = “Times New Roman”;
p1.style.fontWeight = “bold”;

This makes the text in the p1 tag blue and bolded, and changes the font to Times New Roman.

Notice that we don’t use a hyphen for CSS property names with more than one word (e.g. we didn’t write “p1.style.font-family”). This is because Javascript doesn’t allow hyphens to be part of property names. Instead, we capitalize each subsequent word in a CSS property name. For example, “font-weight” becomes “fontWeight”.

Previous Section

Next Section

2️⃣

3.2 Manipulating HTML Elements

Add a page link block here (if there is no next section, delete this column)

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.