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 跨域访问问题解决方法(笔记)
Jun 08 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
常用的javascript设计模式
Jan 11 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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程序内部post数据的方法
2015/03/31 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python实现单词拼写检查
2015/04/25 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
管理专员自荐信
2014/01/26 职场文书
灰雀教学反思
2014/04/28 职场文书
语文教育专业求职信
2014/06/28 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技