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.name代替cookie的实现代码
Nov 28 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
javascript arguments使用示例
Dec 16 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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 解压rar文件及zip文件的方法
2014/05/05 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
js实现3D旋转相册
2020/08/02 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Django使用rest_framework写出API
2020/05/21 Python
Python中zip函数如何使用
2020/06/04 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
公务员培训心得体会
2013/12/28 职场文书
关于运动会的口号
2014/06/07 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
欢迎新生标语2015
2015/07/16 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python