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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
vue登录路由验证的实现
Dec 13 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
js实现九宫格布局效果
May 28 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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
PHP基于imap获取邮件实例
2014/11/11 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
用python实现名片管理系统
2020/06/18 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
内业资料员岗位职责
2014/01/04 职场文书
本科生就业推荐信
2014/05/19 职场文书
会计专业求职信
2014/08/10 职场文书
公司总经理岗位职责
2015/04/01 职场文书
天气温馨提示语
2015/07/14 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
Nginx的基本概念和原理
2022/03/21 Servers