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 相关文章推荐
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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学习笔记之二 php入门知识
2011/01/12 PHP
Joomla开启SEF的方法
2016/05/04 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python统计单词出现的次数
2018/04/04 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
浅谈python常用程序算法
2019/03/22 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
上班上网检讨书
2014/01/29 职场文书
学校校庆演讲稿
2014/05/22 职场文书
2014年安全生产责任书
2014/07/22 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers