Home > Article > Web Front-end > How to remove a row of styles on a button click in jquery
How to remove a row of styles on a button click in jquery
- WBOYOriginal
- 2022-01-14 12:11:481504browse
Method: 1. Use the ".class" selector to set the style for the specified row of elements; 2. Bind the click event to the button and specify the processing function; 3. Use the removeClass() method in the function to remove the specification You can remove a row of styles by specifying the class of the row element. The syntax is "element object.removeClass("specified class")".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How to remove a row of styles by clicking a button in jquery
You can use the .class selector to set styles for specified elements.
In this way, the style of the element can be removed at once. The style can also be removed using the css method, but it cannot be removed directly, so the removeClass method is used.
removeClass() method removes one or more classes from the selected element.
The example is as follows:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("intro");
});
});
</script>
<style type="text/css">
.intro{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p class="intro">这是一行段落。</p>
<p >这是另一行段落。</p>
<button>移除指定一行的样式</button>
</body>
</html>Output result:
After clicking the button:
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of How to remove a row of styles on a button click in jquery. For more information, please follow other related articles on the PHP Chinese website!