jQuery CSS()方法改变现有的CSS样式


Posted in Javascript onAugust 20, 2014

jQuery入门实例:使用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的方法来改变鼠标划过的链接样式。

Javascript 相关文章推荐
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
react antd实现动态增减表单
Jun 03 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 #Javascript
使用时间戳解决ie缓存的问题
Aug 20 #Javascript
js中使用replace方法完成某个字符的转换
Aug 20 #Javascript
js 动态修改css文件用到了cssRule
Aug 20 #Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 #Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 #Javascript
javascript对中文按照拼音排序代码
Aug 20 #Javascript
You might like
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
jquery延迟对象解析
2016/10/26 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python pymongo模块用法示例
2018/03/31 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
python pytest进阶之fixture详解
2019/06/27 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
基于python代码批量处理图片resize
2020/06/04 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
2015质检员个人年终工作总结
2015/10/23 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Python Socket编程详解
2021/04/25 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
MySQL学习必备条件查询数据
2022/03/25 MySQL
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
Redis基本数据类型Set常用操作命令
2022/06/01 Redis