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 相关文章推荐
理解JavaScript的prototype属性
Feb 11 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
$.extend 的一个小问题
Jun 18 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
四十九个javascript小知识实用技巧
Nov 20 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
我的论坛源代码(八)
2006/10/09 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
简单的js表格操作
2016/09/24 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python itertools模块详解
2015/05/09 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python使用str & repr转换字符串
2016/10/13 Python
python 追踪except信息方式
2020/04/25 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python实现京东抢秒杀功能
2021/01/25 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
财务部岗位职责范本
2015/04/14 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers