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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
js日历功能对象
Jan 12 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
VueJS全面解析
Nov 10 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP之短标签开启设置
2013/06/17 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP防盗链代码实例
2014/08/27 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
Javascript之文件操作
2007/03/07 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
进一步探究Python的装饰器的运用
2015/05/05 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Python爬虫教程知识点总结
2020/10/19 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
高中军训感言800字
2014/03/05 职场文书
cf战队收人广告词
2014/03/14 职场文书
家长会主持词开场白
2014/03/18 职场文书
申论倡议书范文
2014/05/13 职场文书
助理政工师申报材料
2014/06/03 职场文书
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript