Add class name with javascript

HTML DOM Element className

The className property sets or returns an element’s class attribute.

See Also:

Syntax

Return the className property:

Set the className property:

Property Values

Value	Description
class	The class name(s) of an element. Separate multiple classes with spaces, like «test demo».

Return Value

More Examples

Get the class attribute of the first element (if any):

Get a class attribute with multiple classes:

Overwrite an existing class attribute with a new one:

To add new classes, without overwriting existing values, add a space and the new classes:

if «myDIV» has a «myStyle» class, change the font size:

const elem = document.getElementById(«myDIV»);

if (elem.className == «mystyle») <
elem.style.fontSize = «30px»;
>

If you scroll 50 pixels from the top of this page, the class «test» is added:

function myFunction() if (document.body.scrollTop > 50) document.getElementById(«myP»).className = «test»;
> else document.getElementById(«myP»).className = «»;
>
>

Related Pages

Browser Support

element.className is supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How TO — Add a Class

Learn how to add a class name to an element with JavaScript.

Add Class

Step 1) Add HTML:

Add a class name to the div element with (in this example we use a button to add the class).

Example

Step 2) Add CSS:

Style the specified class name:

Example

Step 3) Add JavaScript:

Get the element with and add the «mystyle» class to it:

Example

function myFunction() <
var element = document.getElementById(«myDIV»);
element.classList.add(«mystyle»);
>

Tip: Also see How To Toggle A Class.

Tip: Also see How To Remove A Class.

Tip: Learn more about the classList property in our JavaScript Reference.

Tip: Learn more about the className property in our JavaScript Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Add Class Name to the HTML Element Through JavaScript?

JavaScript provides a couple of approaches for adding the class name to an HTML element such as the “.add()” method and the “.className” property. Class name can be added to elements using the CSS(cascading style sheet) and JavaScript. The main purpose of adding class name to an HTML element is to achieve different functionalities on the selected element using the specified class name.

The below-listed JavaScript approaches can be used to add the class name to an HTML element:

What is “.add()” in JavaScript?

“.add()” is a built-in method of the classList property that can be used to add the class name to any specific HTML element. The below snippet will let you understand how to use the “.add” method in JavaScript:

How does the “.add()” method work in JavaScript?

This section will present a step-by-step guide to understand how to add the class name to an HTML element using JavaScript.

In this program we will create three files an “html” file, a “CSS” file, and a “JavaScript” file:

How to add class name to the HTML element through javaScript? < / h2 >
Click Me! < / button >
clicking on the «Click Me!» button will add the class name to the following p element < / h3 >

Welcome to linuxhint.com!!
< / p >

In the above snippet we performed the following functionalities:

• We utilized the tag to add a heading.
• Next, we utilized tag to create a button and named it as “Click Me!”.
• Invoked the “classNameFun()” whenever the user clicked on the button.
• Next, we created an element.
• Finally, we created a paragraph using

  element and assigned it an id “addClass”.

The CSS file served the following functions:

• Align the text in the center using the “text-align” property.
• Set the italic font style using “font-style” property.
• Set the black background color using “background-color” property.
• Finally, set the white text color using the “color” property.

function classNameFun ( ) {
let para = document. getElementById ( «addClass» ) ;
para. classList . add ( «style» ) ;
}

The .js or JavaScript file served the below-listed functionalities:

• Created a function named “classNameFun()”.
• Utilized the getElementByid() method to read/edit an HTML element having an id “addClass”.
• Finally, utilized the add method to add the name to the

  element.

Output
On successful execution of the code, initially, we will get the following output:

Clicking on “Click Me!” button will generate the below-given output:

This is how the “.add()” method work in JavaScript.

What is “.className” in JavaScript?

The “.className” is a property in JavaScript that sets/returns the class attributes of an HTML element. It can be used to add/specify the class name to any HTML tag.

The following snippet will show the basic syntax of the “.className” property:

Here, the “class_Name” represents the name of the class. In case of multiple classes, we can specify the classes name using comma separated syntax.

How does the “.className” property work in JavaScript?

Let’s consider the below given example to get the basic understanding of the “.className” property.

How to add class name to the HTML element through javaScript? < / h3 >
Click Me! < / button >
clicking on the «Click Me!» button will add the class name to this element < / h4 >

The HTML class performed the following tasks:

• Utilized the element to add a heading.
• Utilized tag to create a button and named it as “Click Me!”.
• Invoked the “classNameFun()” whenever the user clicked on the button.
• finally, created an and assigned it an id “addClass”.

The CSS file will remain the same as in the previous example.

function classNameFun ( ) {
let hElement = document. getElementById ( «addClass» ) ;
hElement. className = «style» ;
}

In the JavaScript file, we utilized the getElementById() method to read/edit an HTML element having an id “.addClass”. Afterward, we utilized the add method to add the name to the

element.

Output
When we run the above-given program, initially, this program will produce the below-given output:

After clicking on the “Click Me!” button, the classNameFun() will be invoked, consequently, we will get the following output:

The output clarifies that the class name has been added successfully to the element.

Conclusion

In JavaScript, the “.add()” method and “.className” property are used to add the class name to any HTML element. This write-up explained all the basics for adding class names to any HTML element. This post explained how to use the “.add()” method and “.className” property with the help of some suitable examples.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.

Источник