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实现加载等待效果示例
Sep 25 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
写一个Vue loading 插件
Nov 09 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
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
php 字符串替换的方法
2012/01/10 PHP
PHP 中关于ord($str)>0x80的详细说明
2012/09/23 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
详解PHP数组赋值方法
2015/11/07 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python实现的自动发送消息功能详解
2019/08/15 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python如何实现图片压缩
2020/09/11 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
一封普通求职者的求职信
2013/11/20 职场文书
党员创先争优承诺书
2014/03/26 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python