JQuery - 改变css样式
jQuery提供css()
的方法来实现嵌入式改变元素样式,css()
方法在使用上具有多样性。其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:
$("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456'
如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()
方法。示例如下:
var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’,这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。
另外jQuery提供的css()
方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:
$("#61dh a").css("color") //和第一个例子相似,但是这里我们只传递一个参数(样式属性)
最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")
是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()
。值得注意的是,hover()
方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:
$("#61dh a").css('color','#123456'); $("#61dh a").hover(function(){ $(this).css('color','#999'); }, function(){ $(this).css('color','#123456'); }); //hover()方法的两个函数使用用逗号分隔
你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),其实jQuery提供的hover()
方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。
JQuery - 改变css样式的更多相关文章
- jQuery基础 - 改变CSS样式
jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...
- jQuery中添加/改变/移除改变CSS样式例子
在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 ...
- jQuery CSS()方法改变CSS样式实例解析
转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...
- 改变CSS样式
改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- jQuery获取CSS样式中的颜色值的问题
转自:http://blog.csdn.net/cwj649956781/article/details/23261529 jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法,需 ...
- jQuery改变CSS使DIV显示
HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...
- js改变css样式
CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...
- jquery-8 jquery如何处理css样式
jquery-8 jquery如何处理css样式 一.总结 一句话总结: 1.如何获取网页的三个高? 1)可视区域的高$(window).height(); 2)文档总高度$(document).h ...
随机推荐
- ajenti试用感受
ajenti试用感受_展现技术动态_百度空间 ajenti试用感受 今天看开源中国介绍一款名为"服务器管理系统"的开源软件发布了,名为ajenti,页面感觉不错,对机器的采集信 ...
- Android应用--简、美音乐播放器增加音量控制
Android应用--简.美音乐播放器增加音量控制 2013年6月26日简.美音乐播放器继续完善中.. 题外话:上一篇博客是在6月11号发的,那篇博客似乎有点问题,可能是因为代码结构有点乱的原因,很难 ...
- 在 Linux RedHatEL6 环境下安装配置 JDK1.7 + Tomcat7.0 + MySQL5.6
RedHatEL6 JDK安装路径: /usr/java/jdk1.7 Tomcat安装路径:/usr/local/tomcat7/ MySQL安装路径: /usr/local/mysql 总共分为以 ...
- CRC32 vs Java.HashCode
找了容量为27万中文词库进行试验 CRC32 中冲突率 < 0.01% 而 Java.HashCode 有 4% hashCode 的速度 应该比 CRC 快 2-3 倍 CR ...
- sql 和 nosql 说明
在传统的数据库中, 数据库的格式是由表(table).行(row).字段(field)组成的.表有固定的结构,规定了每行有哪些字段,在创建时被定义,之后修改很困难.行的格式是相同的,由若干个固定的字段 ...
- Oracle如何实现跨数据库查询
转发:http://www.linuxidc.com/Linux/2012-02/53974.htm 实现结果:在一个数据库中某个用户下编写一个存储过程,在存储过程中使用DBLINK连接另一个数据库, ...
- 1724: [Usaco2006 Nov]Fence Repair 切割木板( 贪心 )
倒过来看 , 每次总是选择最短的两块木板合并 , 用heap维护 ------------------------------------------------------------------- ...
- WebSphere优化
优化WebSphere WebSphere里的profile刚配完,一般默认的heapsize即Xms与Xmx值只有256mb,而IBM WAS是几个J2EE服务器中最吃内存的机器,在布署一些EAR应 ...
- PHP学习建议(来自老手)
框架太多了,有一个用着,先用熟练,因为框架思想区别不大. 用熟悉一个,再看其他,就容易多.看那么多,没有一个熟悉的,还是什么也不知道. 框架还是要用熟悉才行,然后才是产品如何设计,mysql性能真的有 ...
- javascript 检测密码强度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...