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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
使用javascript插入样式
Mar 14 Javascript
JS定义类的六种方式详解
May 12 Javascript
javascript事件模型介绍
May 31 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
node跨域请求方法小结
Aug 25 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 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
用Simple Excel导出xls实现方法
2012/12/06 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
JS实现带动画的回到顶部效果
2017/12/28 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python错误处理详解
2014/09/28 Python
Python中多线程及程序锁浅析
2015/01/21 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python3处理含有中文的url方法
2018/05/10 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python缩进长度是否统一
2020/08/02 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
质检员的岗位职责
2013/11/15 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
法制报告会主持词
2014/04/02 职场文书
李白故里导游词
2015/02/12 职场文书