jQuery添加和删除指定标签的方法
- PHP中文网Original
- 2016-05-25 17:13:231108browse
这篇文章主要介绍了jQuery添加和删除指定标签的方法，通过动态的给元素添加删除一个CSS类可以实现此功能,需要的朋友可以参考下
jQuery如何为指定标签添加和删除一个样式:
在网页的实际应用中，需要根据不同的条件来改变元素的CSS样式，通过动态的给元素添加删除一个CSS类可以实现此功能，下面通过实例来介绍一下如何实现此种功能。
一.使用addClass()和removeClass()添加和删除一个CSS类:
代码实例如下:
<!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 () {
$("p").addClass("mytest");
});
$("#del").click(function () {
$("p").removeClass("mytest");
})
})
</script>
<body>
<p>珍惜当前，因为只有当前才是实实在在的</p>
<button id="add">添加样式</button>
<button id="del">删除样式</button>
</body>
</html>
以上代码可以添加删除指定的样式，上面只是一个演示，可以根据具体的需要进行添加或者删除。
二.使用toggleClass()进行样式类的添加和删除的切换:
如果匹配对象具有指定的样式类，那么toggleClass()就可以删除此指定的类，如果没有就会添加指定的类。代码实力如下:
<!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 () {
$("p").toggleClass("mytest");
});
})
</script>
<body>
<p class="mytest">珍惜当前，因为只有当前才是实实在在的</p>
<button id="switch">删除与添加切换</button>
</body>
</html>
以上代码可以进行指定样式类的删除与添加的切换，希望大家可以亲自动手进行操作，收获可能会更大。
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：分割大文件和合并文件的源代码Next article：几种获取路径的后缀名方法