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 相关文章推荐
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
express启用https使用小记
May 21 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
js实现消灭星星(web简易版)
Mar 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
博士208HAF收音机实习报告
2021/03/02 无线电
PHP代码优化的53个细节
2014/03/03 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
用js怎么把&字符换成"&amp:"
2006/10/19 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python循环实现n的全排列功能
2019/09/16 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python求凸包及多边形面积教程
2020/04/12 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
餐饮总经理岗位职责
2014/03/07 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书