Styling Elements
Explore how to modify web page element styles dynamically with JavaScript by using the style property and getComputedStyle function. Understand camelCase naming for CSS properties in JavaScript and learn the limits of directly accessing styles defined in external stylesheets.
We'll cover the following...
JavaScript not only lets you interact with your web page structure but also changes the style of the elements. It’s time to learn how. Here is the example HTML content used in the following paragraphs.
And here is the associated CSS stylesheet. The rules in a stylesheet determine the appearance of elements on a page. Here, the one element we’re adjusting via CSS is the element with the para ID. Its text will be blue and in italics.
Style property
DOM elements are equipped with a property called style, which returns an object representing the HTML element’s style attribute. This object’s properties match up to its CSS properties. By defining these properties with JavaScript, you’re actually ...