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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
js实现秒表计时器
Dec 16 Javascript
微信小程序如何获取地址
Dec 24 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
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python 堆和优先队列的使用详解
2019/03/05 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
python计算无向图节点度的实例代码
2019/11/22 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
新媒传信软件测试面试题
2013/02/24 面试题
夜班门卫岗位职责
2013/12/09 职场文书
《故乡》教学反思
2014/04/10 职场文书
家长给学校的建议书
2014/05/15 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
大学运动会加油稿
2015/07/22 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
python 中的jieba分词库
2021/11/23 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL