jQuery CSS()方法改变现有的CSS样式


Posted in Javascript onAugust 20, 2014

jQuery入门实例:使用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属性值。例如查看链接的颜色,代码如下:

$("#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 相关文章推荐
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 #Javascript
使用时间戳解决ie缓存的问题
Aug 20 #Javascript
js中使用replace方法完成某个字符的转换
Aug 20 #Javascript
js 动态修改css文件用到了cssRule
Aug 20 #Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 #Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 #Javascript
javascript对中文按照拼音排序代码
Aug 20 #Javascript
You might like
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
Python版微信红包分配算法
2015/05/04 Python
EM算法的python实现的方法步骤
2018/01/02 Python
详解python字节码
2018/02/07 Python
python批量获取html内body内容的实例
2019/01/02 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
违反学校规定检讨书
2014/01/18 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
淘宝客服工作职责
2014/07/11 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
三国演义读书笔记
2015/06/25 职场文书
小学运动会通讯稿
2015/07/18 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书