jQuery中添加/改变/移除改变CSS样式例子
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的方法来改变鼠标划过的链接样式。
添加/改变/移除CSS类
1. removeClass() - 移除CSS类
代码如下 | 复制代码 |
$("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 |
2.addClass() - 添加CSS类
代码如下 | 复制代码 |
$("#target").addClass("newClass"); //#target 指的是需要添加样式的元素的ID //newClass 指的是CSS类的名称 |
3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
代码如下 | 复制代码 |
$("#target").toggleClass("newClass") //如果ID为“target”的元素已经定义了CSS样式,它将被移除; //反之,CSS类“newClass”将被赋给该ID。 |
4.hasClass("className") - 判断是否已经存在CSS
在实际运用中,我们通常是先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个按钮)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。顺便告诉前端开发的新手,jquery是值得拥有的,有空了好好研究吧。
jQuery中添加/改变/移除改变CSS样式例子的更多相关文章
- spring:如何用代码动态向容器中添加或移除Bean ?
先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- 改变某个对象的CSS样式时,不要使用JS直接添加样式,
重绘: 使用js改变网页的背景颜色 浏览器会把整个网页的颜色重新在画一遍,导致性能降低 回流: 只要改变某个DOM对象的宽或者高,浏览器就会重新再计算网页结构,重新生成一次,导致性能严重降低. CSS ...
- wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- php部分:网页中报表的打印,并用CSS样式控制打印的部分;
网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印 <a href="#" onclick="wi ...
- word中添加Mathtype公式行间距改变问题
转载链接:http://blog.sciencenet.cn/home.php?mod=space&uid=471807&do=blog&id=616838 最近碰到在word ...
- [简洁]JavaScript中添加、移除、移动、复制、创建和查找节点元素
查找: document.getElementsByTagName通过标签名获取元素,不论有多少个都返回元素集合. document.getElementsByClassName通过类名获取元素,同上 ...
- vs中正常IIS发布网站后css样式、图片丢失jQuery报错 $ is not defined
问题描述: VS运行能够正常看到样式和图片 ,IIS发布后样式丢失.图片不显示.并且jQuery报错“$ is not defined”. 问题分析: 1.首先怀疑是样式文件.图片等发布的时候没有发布 ...
随机推荐
- 考前复习(codevs 2837)
2837 考前复习 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description Aiden马上要考试了,可他 ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
- php jquery ajax
.php文件如下<?php header('Content-Type:text/html;charset=utf-8'); ?> <script type="text ...
- 区间dp总结
poj 1141 Brackets Sequence 基础的区间dp题,注意dp边缘的初始化,以及递归过程中的边界 poj 2955 Brackets 依旧注意初始化,水题 hdu 4745 Two ...
- 【现代程序设计】homework-08
1. 理解C++变量的作用域和生命周期 a) 用少于10行代码演示你对局部变量的生命周期的理解 #include <iostream>int main() { ; ;i<;i++); ...
- C#学习笔记(七)——定义类
一.C#中类的定义 1.类的定义 class Myclass { } 默认情况下是类是内部的,即外部的项目是不可以访问这个类,相当于加internal来修饰.但实际上是不需要加入的. 如果要指定类是公 ...
- C++primer学习笔记(四)——Chapter 6
6.1 Function Basics 一.函数的构造 type functionName( parameters list) statement 1.首先格式如上,一个函数一定要有返回值的类型ty ...
- centOS下安装node4.x
在以前 Node 0.x 的时候,只需要通过 yum install -y nodejs 就可以把 Node 安装好了.但是 yum 安装的 Node 只能安装到 0.10.40 版的,并不能安装到 ...
- python 添加类属性
类属性必须赋值. 创建类属性 类是模板,而实例则是根据类创建的对象. 绑定在一个实例上的属性不会影响其他实例,但是,类本身也是一个对象,如果在类上绑定一个属性,则所有实例都可以访问类的属性,并且,所有 ...
- A jubeat
Time Limit:1000MS Memory Limit:65535K 题型: 编程题 语言: 无限制 描述 jubeat是一款由日本KONAMI倾心打造的体感音乐游戏,该作在日韩.香港等地 ...