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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
原生js实现分页效果
Sep 23 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
php动态绑定变量的用法
2015/06/16 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
肯尼迪就职演说稿
2013/12/31 职场文书
计算机系本科生求职信
2014/05/31 职场文书
食品安全标语
2014/06/07 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014全年工作总结
2014/11/27 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang