Home > Web Front-end > JS Tutorial > body text

How to restore the original css style in jq

醉折花枝作酒筹
Release: 2023-01-05 16:14:17
Original
2893 people have browsed it

In jquery, you can use the "addClass()" method to restore the original style. The syntax format is "$("Element Name").addClcss("Attribute Name", "Attribute Value")";" The addClass()" method adds one or more classes to the selected element and does not remove the existing class attribute.

How to restore the original css style in jq

The operating environment of this tutorial: Windows 7 system, jquery version 1.11.1, Dell G3 computer.

Create a new html file, named test.html, to explain how jquery restores the default css.

How to restore the original css style in jq

In the test.html file, create a module using the div tag and set the class attribute of the div to testdiv.

In the css tag, define a style of testdiv class name, set the width to 100px, the height to 120px, and the background color to yellow.

How to restore the original css style in jq

In the test.html file, use the button tag to create two buttons, one is "Remove css" and "Restore css".

How to restore the original css style in jq

In the test.html file, bind the onclick() click event to the two button buttons respectively. When the button is clicked, the delcss() function and addcss are executed respectively. ()function.

How to restore the original css style in jq

In the js tag, create the delcss() function and the addcss() function respectively. Within the delcss() function, obtain the div object through class(testdiv) and use removeAttr () method removes the class to remove the css style; in the addcss() function, obtain the div object through the element name, and use the addClass() method to add the original class to the div object, thereby restoring the default css.

How to restore the original css style in jq

Open the test.html file in the browser and click on the buttons to see the effect.

How to restore the original css style in jq

How to restore the original css style in jq

How to restore the original css style in jq

##[Recommended learning:

javascript advanced tutorial

The above is the detailed content of How to restore the original css style in jq. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template