分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 01:57责任编辑:林大明关键词: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如何为指定标签添加和删除一个样式

设计知识:jQuery教程

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

原文地址:https://www.cnblogs.com/nulifendou/p/9126408.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved