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 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
原生JS实现轮播图效果
Oct 12 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
浅谈python迭代器
2017/11/08 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python浪漫表白源码
2019/04/05 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
银行实习生自我鉴定范文
2013/09/19 职场文书
应届大学生自荐信格式
2013/09/21 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
施工工地安全标语
2014/06/07 职场文书
植树造林的宣传标语
2014/06/23 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Java 多态分析
2022/04/26 Java/Android