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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
mac下安装nginx和php
2013/11/04 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
删除节点的jquery代码
2014/01/13 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
洗发水广告词
2014/03/13 职场文书
公务员检讨书
2014/11/01 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
初中中等生评语
2014/12/29 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技