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之锁定表格栏位
Jun 29 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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
ftp类(myftp.php)
2006/10/09 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
django框架两个使用模板实例
2019/12/11 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
采购主管岗位职责
2014/02/01 职场文书
致共产党员倡议书
2014/04/16 职场文书
小学作文评语大全
2014/04/21 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
运动会开幕式致辞
2015/07/29 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python