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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
npm的lock机制解析
Jun 20 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
javascript中的隐式调用
2018/02/10 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
《中华少年》教学反思
2014/02/15 职场文书
销售队伍口号
2014/06/11 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
go设置多个GOPATH的方式
2021/05/05 Golang
教你怎么用Python生成九宫格照片
2021/05/20 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript