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 流畅动画实现原理
Sep 08 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
js实现文本框选中的方法
May 26 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
Vue调用后端java接口的实例代码
Oct 28 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
实现树状结构的两种方法
2006/10/09 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
jquery等待效果示例
2014/05/01 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
vuex进阶知识点巩固
2018/05/20 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python如何给函数库增加日志功能
2020/08/04 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
会计自荐书
2013/12/02 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2014年纪检工作总结
2014/11/12 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2015中秋祝酒词
2015/08/12 职场文书