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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
Vue基于iview table展示图片实现点击放大
Aug 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
Terran建筑一览
2020/03/14 星际争霸
怎样辨别一杯好咖啡
2021/03/03 新手入门
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php自动加载机制的深入分析
2013/06/08 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
大学运动会通讯稿
2014/01/28 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
工会工作先进事迹
2014/08/18 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
成本会计实训报告
2014/11/05 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
三方协议书
2015/01/27 职场文书
以权谋私检举信范文
2015/03/02 职场文书
大学感恩节活动总结
2015/05/05 职场文书
大学生就业意向书
2015/05/11 职场文书
聘用合同范本
2015/09/21 职场文书