jQuery CSS()方法改变现有的CSS样式


Posted in Javascript onAugust 20, 2014

jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性。其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔。比如要改变链接颜色,可以这样编写代码:

$("#61dh a").css('color','#123456'); 
//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 
//.css(‘color','#123456');表示把颜色设为'#123456'

如果需要改变多个样式属性,可先定义属性变量,然后直接赋值给css()方法。

var mycss = { 
background: '#EEE', 
width: '478px', 
margin: '10px 0 0', 
padding: '5px 10px', 
border: '1px solid #CCC' 
}; 
$("#result").css(divcss);

上述代码先定义了一个CSS样式属性变量“mycss”,类似于建立一个外部CSS文件,之后通过css()方法,把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以查看某个元素的css属性值。例如查看链接的颜色,代码如下:

$("#61dh a").css("color")

你会发现,这与第一个例子相似,但是这里只传递一个参数(样式属性)。

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色),需要用到jQuery事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

$("#61dh a").css('color','#123456'); 
$("#61dh a").hover(function(){ 
$(this).css('color','#999'); 
}, 
function(){ 
$(this).css('color','#123456'); 
}); 
//hover()方法的两个函数使用用逗号分隔

或许聪明的你已经注意到这种方法称不上简洁,呵呵,其实jQuery hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 #Javascript
使用时间戳解决ie缓存的问题
Aug 20 #Javascript
js中使用replace方法完成某个字符的转换
Aug 20 #Javascript
js 动态修改css文件用到了cssRule
Aug 20 #Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 #Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 #Javascript
javascript对中文按照拼音排序代码
Aug 20 #Javascript
You might like
mysql时区问题
2008/03/26 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
php生成二维码
2015/08/10 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
python绘制多个曲线的折线图
2020/03/23 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
电子商务个人自荐信
2013/12/12 职场文书
文秘人员工作职责
2014/01/31 职场文书
2014政务公开实施方案
2014/02/19 职场文书
本科应届生求职信
2014/08/05 职场文书
股份合作协议书
2014/09/10 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang