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


Posted in Javascript onSeptember 09, 2014

使用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属性值。(3water.com 脚本学堂)

例如查看链接的颜色,代码如下:

$("#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 闭包深入理解(closure)
May 27 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
jquery实现轮播图效果
Feb 13 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 #Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 #Javascript
三种取消选中单选框radio的方法
Sep 09 #Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 #Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 #Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 #Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
学习ExtJS Panel常用方法
2009/10/07 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python类的专用方法实例分析
2015/01/09 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
一套带答案的C++笔试题
2014/01/10 面试题
考博自荐信
2013/10/25 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2015年仓库工作总结
2015/04/09 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android