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

Home

Web Front-end

Front-end Q&A

How to modify the class in javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Feb 08, 2022 pm 02:22 PM

htmljavascriptfront end

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

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Keys in React: A Deep Dive into Performance Optimization TechniquesMay 01, 2025 am 12:25 AM

KeysinReactarecrucialforoptimizingperformancebyaidinginefficientlistupdates.1)Usekeystoidentifyandtracklistelements.2)Avoidusingarrayindicesaskeystopreventperformanceissues.3)Choosestableidentifierslikeitem.idtomaintaincomponentstateandimproveperform

What are keys in React?May 01, 2025 am 12:25 AM

Reactkeysareuniqueidentifiersusedwhenrenderingliststoimprovereconciliationefficiency.1)TheyhelpReacttrackchangesinlistitems,2)usingstableanduniqueidentifierslikeitemIDsisrecommended,3)avoidusingarrayindicesaskeystopreventissueswithreordering,and4)ens

The Importance of Unique Keys in React: Avoiding Common PitfallsMay 01, 2025 am 12:19 AM

UniquekeysarecrucialinReactforoptimizingrenderingandmaintainingcomponentstateintegrity.1)Useanaturaluniqueidentifierfromyourdataifavailable.2)Ifnonaturalidentifierexists,generateauniquekeyusingalibrarylikeuuid.3)Avoidusingarrayindicesaskeys,especiall

Using Indexes as Keys in React: When It's Acceptable and When It's NotMay 01, 2025 am 12:17 AM

Using indexes as keys is acceptable in React, but only if the order of list items is unchanged and not dynamically added or deleted; otherwise, a stable and unique identifier should be used as the keys. 1) It is OK to use index as key in a static list (download menu option). 2) If list items can be reordered, added or deleted, using indexes will lead to state loss and unexpected behavior. 3) Always use the unique ID of the data or the generated identifier (such as UUID) as the key to ensure that React correctly updates the DOM and maintains component status.

React's JSX Syntax: A Developer-Friendly Approach to UI DesignMay 01, 2025 am 12:13 AM

JSXisspecialbecauseitblendsHTMLwithJavaScript,enablingcomponent-basedUIdesign.1)ItallowsembeddingJavaScriptinHTML-likesyntax,enhancingUIdesignandlogicintegration.2)JSXpromotesamodularapproachwithreusablecomponents,improvingcodemaintainabilityandflexi

What type of audio files can be played using HTML5?Apr 30, 2025 pm 02:59 PM

The article discusses HTML5 audio formats and cross-browser compatibility. It covers MP3, WAV, OGG, AAC, and WebM, and suggests using multiple sources and fallbacks for broader accessibility.

Difference between SVG and Canvas HTML5 element?Apr 30, 2025 pm 02:58 PM

SVG and Canvas are HTML5 elements for web graphics. SVG, being vector-based, excels in scalability and interactivity, while Canvas, pixel-based, is better for performance-intensive applications like games.

Is drag and drop possible using HTML5 and how?Apr 30, 2025 pm 02:57 PM

HTML5 enables drag and drop with specific events and attributes, allowing customization but facing browser compatibility issues on older versions and mobile devices.

See all articles