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中创建对象和继承示例解读
Feb 12 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解vuex的简单使用
Mar 12 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
前端vue如何使用高德地图
Nov 05 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中对数据库操作的封装
2006/10/09 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
php如何获取Http请求
2020/04/30 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
浅析Python中的join()方法的使用
2015/05/19 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
规划编制实施方案
2014/03/15 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
个人租房协议书范本
2014/09/30 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js