Changing the Styles of HTML Elements

In the last chapter, you learned how to find an HTML and change its content. Likewise, you can change the styles of the HTML. We'll look at several ways.

Change with Style Property

You can change the CSS style properties using the style attribute of HTML Elements. Let's dive into an example right away. In the below code, the Javascript changes the font color of the paragraph tags to blue.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>Changing the Color of the Paragraph</h1>

<p id = 'my-para'>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>

const element = document.getElementById('my-para').style.color = 'blue';

</script>

</body>

</html>

Note that you can access the above element either with the getElementById or querySelector. So through the style attribute, you can change the value of any CSS property.

Change with Events

In the real world, most web applications change their styles after the occurrence of an event. So in this example, you'll discover how to hide an element using one button click and then make it visible again with another button click. This is possible with the help of the visibility property.

Also, at this stage, do not pay much attention to the event part, as there'll be a separate lesson on it later. For now, assume that onclick detects the click event of the button where you can write JavaScript code.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>Hide and Unhide an element</h1>

<p id = 'p1'>This is a paragraph element. This is a paragraph element. This is a paragraph element. </p>

</body>

</html>

Changing Multiple CSS Properties at Once

You may arise with a scenario where you would have to change more than one style. Then from what you've learned so far, you can repeat the style property with different values in each line.

However, it is not a best practice for coding as it needs to be readable. So then, you can create a JavaScript variable and store all the style values. Then when the button is clicked, you can associate the click event handler to the function to assign the variable mentioned above which is called template literals. Finally, you can assign it to the cssText property.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>Add Multiple Styles</h1>

<h2 class = 'demo' style = 'color: red;'>Hello, Please Click the button to change my appearance</h2>

<button class = 'add' onclick = 'addStyles()'>Change CSS style</button>

function addStyles() {

const myStyles = `

background-color: red;

border : 2px;

width : 60%;

font-size :16px;

color : white;

margin: 20px;

padding : 10px 0px 10px 10px;

border: 2px solid black;

const element = document.querySelector('.demo');

element.style.cssText = myStyles;

}

</script>

</body>

</html>

1. Which of the following pieces of code changes the font color of the element

I'm heading

to yellow?

2. Which of the following pieces of code changes the background color to pink, font size to 45px, and font color of the element
some paragraph
to white at once on the onclick event handler of the button?

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 3

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Changing the Styles of HTML Elements

Change with Style Property

Change with Events

Changing Multiple CSS Properties at Once

1. Which of the following pieces of code changes the font color of the element

I'm heading

2. Which of the following pieces of code changes the background color to pink, font size to 45px, and font color of the element some paragraph to white at once on the onclick event handler of the button?

I'm heading

2. Which of the following pieces of code changes the background color to pink, font size to 45px, and font color of the element
some paragraph
to white at once on the onclick event handler of the button?