jQuery如何为指定标签添加和删除一个样式

更新日期: 2018-06-04阅读: 3.4k标签: jquery分享

复制链接

新浪微博

QQ 好友

扫一扫分享

在网页的实际应用中，需要根据不同的条件来改变元素的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 () {
    $("div").addClass("mytest");
  });
  $("#del").click(function () {
    $("div").removeClass("mytest");
  })
})
</script>
<body>
<div>珍惜当前，因为只有当前才是实实在在的</div>
<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 () {
    $("div").toggleClass("mytest");
  });
})
</script>
<body>
<div class="mytest">珍惜当前，因为只有当前才是实实在在的</div>
<button id="switch">删除与添加切换</button>
</body>
</html>

以上代码可以进行指定样式类的删除与添加的切换。

转载地址：jQuery如何为指定标签添加和删除一个样式

链接: https://fly63.com/article/detial/850

jQuery如何为指定标签添加和删除一个样式

一.使用addClass()和removeClass()添加和删除一个CSS类:

二.使用toggleClass()进行样式类的添加和删除的切换:

是时候和 jQuery 说拜拜了么？

前端程序员应该知道的15个jQuery小技巧

Jquery插件开发的方法总汇

JQuery 自动触发事件

高版本jquery中attr和prop的区别

原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

jquery分页插件pagination.js报错pagination is not a function的bug解决方法

jQuery 常用小技巧分享

jquery动画实现_浅谈jQuery之动画

jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现