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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
js 处理URL实用技巧
Nov 23 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
js中的this的指向问题详解
Aug 29 Javascript
layui 弹出层值回传解决方式
Nov 14 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
PHP个人网站架设连环讲(四)
2006/10/09 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Django中几种重定向方法
2015/04/28 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python实现最常见加密方式详解
2019/07/13 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
python+requests接口自动化框架的实现
2020/08/31 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
自我鉴定写作要点
2014/01/17 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
青安岗事迹材料
2014/05/14 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
焦点访谈观后感
2015/06/11 职场文书
升学宴祝酒词
2015/08/11 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers
JavaScript实现简单的音乐播放器
2022/08/14 Javascript