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 相关文章推荐
jquery中文乱码的多种解决方法
Jun 21 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
javascript history对象详解
Feb 09 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
JavaScript中reduce()的用法
May 11 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示例分享
2014/04/22 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
js验证表单第二部分
2006/11/25 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Apache如何部署django项目
2017/05/21 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python保存文件方法小结
2018/07/27 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
kali中python版本的切换方法
2019/07/11 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
生物科学专业个人求职信范文
2013/12/07 职场文书
党支部综合考察材料
2014/05/19 职场文书
政协调研汇报材料
2014/08/15 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书