How to modify the class in javascript-Front-end Q&A-php.cn

How to modify the class in javascript

WBOY

Release： 2022-02-08 14:22:56

Original

2496 people have browsed it

In JavaScript, you can use the classList attribute with the toggle() method to modify the class. The classList attribute is used to return the class name of the element. The toggle() method is used to switch the class name in the element. The syntax is "element .classList.toggle(classname)".

How to modify the class in javascript

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

How to modify the class in javascript

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

This property is used to add, remove and switch CSS classes in elements.

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

The syntax is:

element.classList

Copy after login

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:

true - the 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. Index values start from 0.

Returns null if the index value is outside the interval

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

Note: No error will be reported if non-existent class names are removed.

toggle(class, true|false) Toggles the class name in the element.

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

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

The second is an optional parameter, which is a Boolean value used to set whether the element is forced to add or remove a class, regardless of whether the class name exists. For example:

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

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

The example is as follows:

<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.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;
}
</style>
</head>
<body>
<p>点击按钮切换类名。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 classList 属性。</p>
<div id="myDIV" class="mystyle">
我是一个 DIV 元素。
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").classList.toggle("newClassName");
}
</script>
</body>
</html>

Copy after login

Output result:

How to modify the class in javascript

##After clicking the button:

How to modify the class in javascript

Related recommendations:

javascript learning tutorial

The above is the detailed content of How to modify the class in javascript. For more information, please follow other related articles on the PHP Chinese website!