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 相关文章推荐
window.onresize 多次触发的解决方法
Nov 08 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python PIL模块的基本使用
2020/09/29 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
什么是GWT的Module
2013/01/20 面试题
化学系大学生自荐信范文
2014/03/01 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
优秀英文求职信范文
2015/03/19 职场文书
超市员工管理制度
2015/08/06 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书