我们经常要使用Javascript来改变页面元素的样式。当中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们一般是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，尽管它们和传统方法的思想相通，可是却节省了很多代码。还是那句话 - “jQuery让JavaScript代码变得简洁！”

1. addClass() - 加入�CSS类

$("#target").addClass("newClass");

//#target 指的是须要加入�样式的元素的ID

//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类

$("#target").removeClass("oldClass");

//#target 指的是须要移除CSS类的元素的ID

//oldClass 指的是CSS类的名称

3. toggleClass() - 加入�或者移除CSS类：假设CSS类已经存在，它将被移除；相反，假设CSS类不存在，它将被加上。

$("#target").toggleClass("newClass")

//假设ID为“target”的元素已经定义了CSS样式，它将被移除；

//反之，CSS类”newClass“将被赋给该ID。

在实际运用中，我们经常先定义好这些CSS类，然后通过Javascript事件触发（比方点击某个链接）来改变页面元素样式。此外，jQuery还提供一种方法 hasClass("className")用来推断某个元素是否已经被赋予某个CSS类。

以下是一个完整的样例。

<!DOCTYPE HTML>

<head>

<title>图片闪烁</title>

<style type="text/css">

@-webkit-keyframes twinkling{	/*透明度由0到1*/

	0%{

		opacity:0;				/*透明度为0*/

	}

	100%{

		opacity:1;				/*透明度为1*/

	}

}

.up{

	-webkit-animation: twinkling 1s infinite ease-in-out;

}

</style>

</head>

<body>

<div id="soccer" class="up">

哈哈

</div>

<br/>

<input type="button"  onclick='btnClick()'>

<script src="./jQuery/jquery-1.8.3.js" type="text/javascript"></script>

<script>

function btnClick(){

//$("#soccer").removeClass("up");

$("#soccer").toggleClass("up");

 //$("p:first").removeClass("intro");

}

</script>

</body>

</html>

javascript操作元素的css样式的更多相关文章

  1. 转：jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  2. 使用jquery操作元素的css样式（获取、修改等等）

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  3. DOM中操作结点的属性_操作元素结点的样式

    有俩种方式操作结点的属性. 首先我们需要先获取所要操作的结点元素: var uname=document.getElementById("uname"); var gan=unam ...

  4. jQuery操作元素对象的样式

    在jQuery中操作元素为了加快速度,或者书写速度,可以用到json的格式: <!DOCTYPE html> <html> <head> <meta char ...

  5. 3 、操作元素 (属性 CSS 和 文档处理)

    3   操作元素-属性 CSS 和 文档处理  3.1 属性操作 $("p").text()    $("p").html()   $(":check ...

  6. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  7. 利用link标签的disabed属性大面积的对其他标签元素的CSS样式进行替换操作

    由于平时对元素样式的控制基本上只是3,4个,所以一般用Jquery的时候直接使用$(element).css();这个方法,或者使用$(element).addClass()方法完成样式操作.对于小范 ...

  8. javascript获取元素的计算样式

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  9. javascript 操作元素属性的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. UNIX/Linux进程间通信IPC---管道--全总结(实例入门)

    管道 一般,进程之间交换信息的方法只能是经由fork或exec传送打开文件,或者通过文件系统.而进程间相互通信还有其他技术——IPC(InterProcessCommunication) (因为不同的 ...

  2. centos6.5配置163的yum源

    CentOS系统自带的更新源的速度实在是慢,为了让CentOS6使用速度更快的YUM更新源,可以选择163(网易)的更新源. 1.下载repo文件 wget http://mirrors.163.co ...

  3. 2013 南京邀请赛 A play the dice 求概率

    /** 大意:给定一个色子,有n个面,每一个面上有一个数字,在其中的m个面上有特殊的颜色,当掷出的色子出现这m个颜色之一时,可以再掷一次..求其最后的期望 思路:假设 期望为ans 4 ans = 1 ...

  4. poj 3335 /poj 3130/ poj 1474 半平面交 判断核是否存在 / poj1279 半平面交 求核的面积

    /*************** poj 3335 点序顺时针 ***************/ #include <iostream> #include <cmath> #i ...

  5. 如何用一个语句判断一个整数是不是二的整数次幂——从一道简单的面试题浅谈C语言的类型提升(type promotion)

    最近招聘季,看JULY大哥的面试100题时,碰到这么一个扩展问题: 如何用一个语句判断一个整数是不是二的整数次幂?(此题在编程之美也有) easy, 2的整数次幂的二进制形式只有一个1,只要用i和i- ...

  6. There is an error in invoking javac. A full JDK (not just JRE) is required

    最近调整了磁盘分区,硬盘里什么都没有了,可惜了我很多项目还有数据库资源然后把以前ssh项目重新导入进来的时候出现了一个错误org.apache.jasper.JasperException: PWC6 ...

  7. 基于visual Studio2013解决C语言竞赛题之0204实数求值

     题目

  8. 动态弹球的实现 加入了多线程技术--javaSE游戏准备工作

    任务描述:实现了动态弹球的功能,对于有弹球功能的SE游戏奠定了基础. package 运用线程技术的小球; import java.awt.*; import java.awt.event.*; im ...

  9. 2013 成都网络赛 1004 Minimum palindrome

    题目大意:用m个字母组成一个长度为N的字符串,使得最长的回文子串 的长度最小. 并且要求字典序最小. 思路:分类模拟. 当M为1 的时候就直接输出N个A 当M大于2的时候就循环ABC 当M等于2的时候 ...

  10. cocos2d-x 之Scene和Layer

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...