Is it possible to modify HTML style using JavaScript by selecting the class name without using jQuery?

Question

Is it possible to modify HTML style using JavaScript by selecting the class name without using jQuery?

I've been experimenting with some code and noticed that when I use the element ID, it works fine, but when I try to use the class name, it doesn't work...

<!DOCTYPE html>
<html>
<body>

<p id="p1" class="theClass">Hello World!</p>
<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color = "blue";
document.getElementsByClassName("theClass").style.color = "blue";

document.getElementById("p2").style.fontSize = "larger";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Check out the screenshot of the output:

https://i.sstatic.net/P1uTE.png

javascript html css class

Answer 1

Answer №1

getElementsByClassName does not return an element, but rather an HTMLCollection. If you want to apply a style to a specific element within the collection, you should first select that individual element:

document.getElementsByClassName("theClass")[0].style.color = "blue";

<p id="p1" class="theClass">Hello World!</p>

However, if you are targeting a single element, it is recommended to use querySelector for better performance:

document.querySelector('.theClass').style.color = "blue";

<p id="p1" class="theClass">Hello World!</p>

When dealing with multiple elements sharing a common class name, using getElementsBy* methods can be cumbersome. Consider utilizing querySelectorAll instead, which returns a static NodeList. Unlike HTMLCollection, NodeList allows direct iteration without any change during iteration and offers more flexibility:

document.querySelectorAll('.theClass')
  .forEach(p => p.style.color = "blue");

<p class="theClass">Hello World!</p>
<p class="theClass">Hello World!</p>
<p class="theClass">Hello World!</p>

Answer 2

getElementsByClassName does not return an element, but rather an HTMLCollection. If you want to apply a style to a specific element within the collection, you should first select that individual element:

document.getElementsByClassName("theClass")[0].style.color = "blue";

<p id="p1" class="theClass">Hello World!</p>

However, if you are targeting a single element, it is recommended to use querySelector for better performance:

document.querySelector('.theClass').style.color = "blue";

<p id="p1" class="theClass">Hello World!</p>

When dealing with multiple elements sharing a common class name, using getElementsBy* methods can be cumbersome. Consider utilizing querySelectorAll instead, which returns a static NodeList. Unlike HTMLCollection, NodeList allows direct iteration without any change during iteration and offers more flexibility:

document.querySelectorAll('.theClass')
  .forEach(p => p.style.color = "blue");

<p class="theClass">Hello World!</p>
<p class="theClass">Hello World!</p>
<p class="theClass">Hello World!</p>

Answer 3

Answer №2

Using document.getElementsByClassName

allows you to obtain a list of nodes. However, this list does not have a style property. To apply styles, you must iterate through the list.

If there is only one div present, you can do the following:

document.getElementsByClassName("theClass")[0].style.color = "red"

PS. Remember to always check your browser's console if something is not working as intended. You may encounter an error message like cannot access ... .style of ...

document.getElementById("p2").style.color = "blue";
document.getElementsByClassName("theClass")[0].style.color = "blue";

document.getElementById("p2").style.fontSize = "larger";

var elements = document.getElementsByClassName('theClass1');

for(var i=0; i< elements.length; i++){
   elements[i].style.color = "green"

}

<!DOCTYPE html>
<html>
<body>

<p id="p1" class="theClass">Hello World!</p>
<p id="p2">Hello World!</p>

<p id="p12" class="theClass1">Hello World 1!</p>
<p id="p14" class="theClass1">Hello World 2!</p>
<p id="p13" class="theClass1">Hello World 3!</p>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Answer 4

Using document.getElementsByClassName

allows you to obtain a list of nodes. However, this list does not have a style property. To apply styles, you must iterate through the list.

If there is only one div present, you can do the following:

document.getElementsByClassName("theClass")[0].style.color = "red"

PS. Remember to always check your browser's console if something is not working as intended. You may encounter an error message like cannot access ... .style of ...

document.getElementById("p2").style.color = "blue";
document.getElementsByClassName("theClass")[0].style.color = "blue";

document.getElementById("p2").style.fontSize = "larger";

var elements = document.getElementsByClassName('theClass1');

for(var i=0; i< elements.length; i++){
   elements[i].style.color = "green"

}

<!DOCTYPE html>
<html>
<body>

<p id="p1" class="theClass">Hello World!</p>
<p id="p2">Hello World!</p>

<p id="p12" class="theClass1">Hello World 1!</p>
<p id="p14" class="theClass1">Hello World 2!</p>
<p id="p13" class="theClass1">Hello World 3!</p>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Answer 5

Answer №3

Give this a shot:

document.querySelector(".theClass").style.color = "blue";

Answer 6

Give this a shot:

document.querySelector(".theClass").style.color = "blue";

Is it possible to modify HTML style using JavaScript by selecting the class name without using jQuery?

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Wordpress Metabox that utilizes radio inputs generated with Javascript instead of the traditional checked() function in Javascript as an alternative

Is your component failing to re-render after a state change?

Unique option preservation on customized HTML select menus - Maintain original selection

Adjust the size of the buttons based on the width of the screen

Parcel React component library throws an error stating that "require is not defined

Iframe Interactivity

Can a snapshot be taken of an auto-generated ID document in FireStore?

Transform the appearance of a complex image by altering its color using CSS

The POST request is not functioning. An error has occurred: Unable to retrieve response data - no content is available for the preflight request

Assign a role to a user using the latest version of discord.js

How to convert JSON data (excluding headers) into a string array using TypeScript

Steps for generating a current date and a date one year in the past

Iterate through several table data cells, extract various data points, and populate an array

Disabling pagination for custom searches in datatables

The background image of the li element is not appearing in Firefox browser

Text that appears as an HTML button is displayed after being compiled using the $

What steps should I take to ensure that my table is positioned above my ContentPlaceHolder?

Anonymized Score Reporting through Google Analytics analytics.js

JQuery selector is unable to locate element when passing Span Id

Use vtip jQuery for showcasing titles