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 相关文章推荐
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
岗位职责范本
2013/11/23 职场文书
任课老师推荐信范文
2013/11/24 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
绿色小区申报材料
2014/08/22 职场文书
护士求职自荐信范文
2015/03/04 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Python语言规范之Pylint的详细用法
2021/06/24 Python