Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to modify the class of javascript", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to modify the class of javascript" can help you solve your doubts.

In JavaScript, the class can be modified using the classList attribute with the toggle () method, the classList attribute is used to return the class name of the element, and the toggle () method is used to switch the class name in the element with the syntax "element.classList.toggle (class name)".

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

How to modify classes by javascript

The classList attribute returns the class name of the element as a DOMTokenList object.

This attribute is used to add, remove, and switch CSS classes to the element.

The classList property is read-only, but you can modify it using the add () and remove () methods.

The syntax is:

Element.classList

Add (class1, class2,...) Add one or more class names to the element.

If the specified class name already exists, it will not be added

Contains (class) returns a Boolean value to determine whether the specified class name exists.

Possible values:

The true-element package already contains the class name

False-the class name does not exist in the element

Item (index) returns the class name corresponding to the index value in the element. The index value starts at 0.

Returns null if the index value is outside the interval range

Remove (class1, class2,...) Removes one or more class names from the element.

Note: remove non-existent class names and will not report an error.

Toggle (class, true | false) switches the class name in the element.

The first parameter is the name of the class to be removed from the element and returns false.

If the class name does not exist, the class name is added to the element and true is returned.

The second is an optional parameter, a Boolean value that sets whether the element forces the addition or removal of a class, regardless of whether the class name exists or not. For example:

Remove a class: element.classList.toggle ("classToRemove", false)

Add a class: element.classList.toggle ("classToAdd", true)

Examples are as follows:

123.mystyle {width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px;} .newClassName {width: 400px; height: 100px; background-color: lightblue; text-align: center; font-size: 25px; color: navy; margin-bottom: 10px;}

Click the button to switch the class name.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.