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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
如何用JS模拟实现数组的map方法
Jul 30 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
星际实力自我测试
2020/03/04 星际争霸
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
javascript判断office版本示例
2014/04/11 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
python实现扫雷游戏的示例
2020/10/20 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
请解释在new与override的区别
2012/10/29 面试题
什么时候用assert
2015/05/08 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
总经理助理工作职责
2014/02/06 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
党员争先创优承诺书
2015/01/20 职场文书
被委托人身份证明
2015/08/07 职场文书
女性励志书籍推荐
2019/08/19 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
青岛市的收音机研制与生产
2022/04/07 无线电