jQuery中添加/改变/移除改变CSS样式例子
CSS()方法改变CSS样式
css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔。比如要改变链接颜色,可以这样编写代码:
代码如下 | 复制代码 |
$("#61dh a").css('color','#123456'); //选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' |
如果需要改变多个样式属性,可先定义属性变量,然后直接赋值给css()方法。示例如下:
代码如下 | 复制代码 |
var mycss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); |
上述代码先定义了一个CSS样式属性变量“mycss”,类似于建立一个外部CSS文件,之后通过css()方法,把属性赋给ID为'#result'的DIV。
另外jQuery提供的css()方法还可以查看某个元素的css属性值。例如查看链接的颜色,代码如下:
代码如下 | 复制代码 |
$("#61dh a").css("color") |
你会发现,这与第一个例子相似,但是这里只传递一个参数(样式属性)。
最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色),需要用到jQuery事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:
代码如下 | 复制代码 |
$("#61dh a").css('color','#123456'); $("#61dh a").hover(function(){ $(this).css('color','#999'); }, function(){ $(this).css('color','#123456'); }); //hover()方法的两个函数使用用逗号分隔 |
或许聪明的你已经注意到这种方法称不上简洁,呵呵,其实jQuery hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。
添加/改变/移除CSS类
1. removeClass() - 移除CSS类
代码如下 | 复制代码 |
$("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 |
2.addClass() - 添加CSS类
代码如下 | 复制代码 |
$("#target").addClass("newClass"); //#target 指的是需要添加样式的元素的ID //newClass 指的是CSS类的名称 |
3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
代码如下 | 复制代码 |
$("#target").toggleClass("newClass") //如果ID为“target”的元素已经定义了CSS样式,它将被移除; //反之,CSS类“newClass”将被赋给该ID。 |
4.hasClass("className") - 判断是否已经存在CSS
在实际运用中,我们通常是先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个按钮)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。顺便告诉前端开发的新手,jquery是值得拥有的,有空了好好研究吧。
转载于:https://www.cnblogs.com/telwanggs/p/4529594.html
jQuery中添加/改变/移除改变CSS样式例子相关推荐
- jquery中添加属性和删除属性--------------------
jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...
- jquery中添加属性和删除属性
jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...
- 如何:在 Visual Studio 中添加或移除引用(转载)
http://msdn2.microsoft.com/zh-cn/library/wkze6zky(VS.80).aspx Visual Studio 如何:在 Visual Studio 中添加或移 ...
- spring:如何用代码动态向容器中添加或移除Bean ?
先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...
- jquery中remove()方法移除被选元素,包括所有的文本和子节点
jquery中remove方法移除被选元素,包括所有的文本和子节点 定义和用法 移除所有的 元素 移除html中指定id的元素内容 定义和用法 remove() 方法移除被选元素,包括所有的文本和子节 ...
- html移除单个css样式,jq如何移除css样式?
jQuery如何移除css样式?下面本篇文章就来给大家介绍一些使用jQuery添加移除css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1. addClass() - ...
- Thymeleaf中设置每个页面引入公共css样式
场景 Thymeleaf提取公共页面(从实例入手,以inspinia模板为例): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/9 ...
- wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
- vue-amap中添加高德地图地图的自定义样式
高德地图的自定义官方样式列表: 使用: amap://styles/+ 样式的名称 如: 使用标准颜色 amap://styles/normal 依次类推 normal (标准).dark(幻影黑). ...
最新文章
- Moment矩计算公式
- 使用Django1.11创建简单的资产管理平台
- Mysql用navicat查看建表语句
- ceph架构/IO原理分析(齐全)
- C# winForm 定时访问PHP页面小工具
- Mac Supervisor 管理进程
- python问题分享_零基础入门Python常见问题分享
- C#中WebBrowser控件的使用
- Linux命令——cut命令学习
- 卖地方特色才产品,类似湖南味道那样的网上专卖店
- 计算机操作系统知识点总结
- rup软件测试案例,rup软件测试基础.ppt
- Java—圆柱体计算
- 2022-2027年中国服装定制行业市场全景评估及发展战略规划报告
- catic备份mysql,Catic构建与部署
- Java课程设计——计算平面图形面积周长、立体图形体积
- Excel阅读器NPOI
- python习题计算a+aa+aaa+aaaa的结果 lintcode题目
- 互联网竟然来自于冷战核威胁
- php传输文件大小修改的限制
热门文章
- php把字符串变成多组,php把字符串变成数组(有分隔符)
- (40)FPGA原语设计(ODDR)
- (27)System Verilog设计UART接收
- mysql连接编码设置_MySQL基础 - 编码设置
- 2024.常见一些设计类模板
- 【飞控理论】从零开始学习Kalman Filters之三:非线性状态估算器
- 【蓝桥杯嵌入式】【STM32】8_USART之响应上位机指令发送实时时间
- 我的世界java村民繁殖_我的世界:1.14版本刷新几率小的五种村庄,没有村民咋回事?...
- 【LeetCode】剑指 Offer 44. 数字序列中某一位的数字
- 虫师自动化测试robot Framework 框架的学习2