jQuery CSS()方法改变现有的CSS样式表


Posted in Javascript onSeptember 09, 2014

使用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属性值。(3water.com 脚本学堂)

例如查看链接的颜色,代码如下:

$("#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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
JQuery魔力之$("tagName")与selector
Mar 05 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
HTML的select控件美化
Mar 27 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 #Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 #Javascript
三种取消选中单选框radio的方法
Sep 09 #Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 #Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 #Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 #Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 #Javascript
You might like
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
js 学习笔记(三)
2009/12/29 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python操作json的方法实例分析
2018/12/06 Python
python取余运算符知识点详解
2019/06/27 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
介绍一下gcc特性
2015/10/31 面试题
初三家长会邀请函
2014/01/18 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
小学教师读书活动总结
2014/07/08 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
入党函调证明材料
2014/12/24 职场文书
文明倡议书
2015/01/19 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
vue实现列表垂直无缝滚动
2022/04/08 Vue.js