Home >Web Front-end >JS Tutorial >jQuery method to add and delete specified tags_jquery

jQuery method to add and delete specified tags_jquery

WBOYOriginal: 2016-05-16 15:25:271708browse

How jQuery adds and removes a style for a specified tag:
In the actual application of web pages, the CSS style of elements needs to be changed according to different conditions. This function can be achieved by dynamically adding and deleting a CSS class to the element. The following is an example of how to implement this function.
1. Use addClass() and removeClass() to add and remove a CSS class:
The code example is as follows:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#add").click(function () {
 $("div").addClass("mytest");
 });
 $("#del").click(function () {
 $("div").removeClass("mytest");
 })
})
</script>
<body>
<div>珍惜当前，因为只有当前才是实实在在的</div>
<button id="add">添加样式</button>
<button id="del">删除样式</button>
</body>
</html>

The above code can add and delete specified styles. The above is just a demonstration and can be added or deleted according to specific needs.
2. Use toggleClass() to switch between adding and deleting style classes:
If the matching object has the specified style class, then toggleClass() can delete the specified class, if not, the specified class will be added. The code strength is as follows:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#switch").click(function () {
 $("div").toggleClass("mytest");
 });
})
</script>
<body>
<div class="mytest">珍惜当前，因为只有当前才是实实在在的</div>
<button id="switch">删除与添加切换</button>
</body>
</html>

The above code can be used to switch between deleting and adding specified style classes. I hope you can do it yourself, and the harvest may be greater.

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

Previous article：Implementing provincial and municipal linkage special effects based on jquery_jqueryNext article：Implementing provincial and municipal linkage special effects based on jquery_jquery

See more

jQuery method to add and delete specified tags_jquery

Related articles