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

时间: 2018-06-04阅读: 1029标签: 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 () {
    $("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如何为指定标签添加和删除一个样式


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/850

关闭

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法;第二步调用自定义的组件

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

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

jquery版本过低安全漏洞问题

最近在做项目的时候扫描除了很多js版本过低的问题,主要集中在1.x 2.x 还有1.12jQuery&<2.2 jQuery,过滤用户输入数据的正则存在缺陷,可能造成跨站漏洞,具体修复介绍可以查看官方。

在jQuery中使用自定义属性

在jquery中 自定义属性及值,默认以下都是在class=‘acitve‘对象中 进行自定义属性操作:自定义属性格式:data-xxxx;审查元素是看不到该属性的,只能输出控制台可以看到该值。

jquery实现点击控制div的显示和隐藏

我们使用点击显示、点击隐藏的时候,一般有两种可选方案,toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示

jQuery数据缓存$.data 的使用以及源码解析

对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题

js和jquery设置css的几种方式

js设置样式的方法: 直接设置style的属性 某些情况用这个设置 !important值无效、直接设置属性(只能用于某些属性,相关样式会自动识别); 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数

前端jquery防止数据重复提交

前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者 class 元素控制

jQuery 常用小技巧分享

整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!