jQuery 改变CSS样式基础代码


Posted in Javascript onFebruary 11, 2010

其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:

$("#61dh a").css('color','#123456'); 
//这里选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 
//.css(‘color','#123456');表示把颜色设为'#123456'

如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:
var divcss = { 
background: '#EEE', 
width: '478px', 
margin: '10px 0 0', 
padding: '5px 10px', 
border: '1px solid #CCC' 
}; 
$("#result").css(divcss); 
//这里我们先定义了一个CSS样式属性变量‘divcss',这类似于建立一个外部CSS文件。 
//然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:
$("#61dh a").css("color") 
//和第一个例子相似,但是这里我们只传递一个参数(样式属性)

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:
$("#61dh a").css('color','#123456'); 
$("#61dh a").hover(function(){ 
$(this).css('color','#999'); 
}, 
function(){ 
$(this).css('color','#123456'); 
}); 
//hover()方法的两个函数使用用逗号分隔

你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),
其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。
Javascript 相关文章推荐
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
js的回调函数详解
Jan 05 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 #Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 #Javascript
JavaScript 输入框内容格式验证代码
Feb 11 #Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 #Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 #Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 #Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
php使用parse_url和parse_str解析URL
2015/02/22 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
python中异常捕获方法详解
2017/03/03 Python
python装饰器深入学习
2018/04/06 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
倡议书格式模板
2014/05/13 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
如何Tomcat中使用ipv6地址
2022/05/06 Servers
Hive导入csv文件示例
2022/06/25 数据库