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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
mock.js模拟数据实现前后端分离
Jul 24 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
php读取本地json文件的实例
2018/03/07 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
Python os模块介绍
2014/11/30 Python
详解Python Socket网络编程
2016/01/05 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
招商业务员岗位职责
2013/12/16 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
求职自我评价参考范文
2019/05/16 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL