CSS类的操作

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			.b1 {

				width: 100px;

				height: 100px;

				background-color: skyblue;

			}

			.b2 {

				/* width: 200px; */

				height: 200px;

				background-color: aquamarine;

			}

		</style>

		<script type="text/javascript">

			window.onload = function() {

				// 获取box

				var box = document.getElementById("box");

				// 获取btn01

				var btn01 = document.getElementById("btn01");

				// 获取btn02

				var btn02 = document.getElementById("btn02");

				// 为btn01绑定单击响应函数

				btn01.onclick = function() {

					// 修改box的样式

					/*

					通过style属性来修改元素的样式，没修改一个样式，浏览器就需要重新渲染一次页面

					  这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不方便

					*/

					// box.style.width="200px";

					// box.style.height="200px";

					// box.style.backgroundColor="yellow";

					// 修改box的class属性

					/*

					我们可以通过修改元素的class属性来间接的修改样式

					只需要一次，即可同时修改多个样式

					  浏览器只需要重新渲染页面一次，性能比较好

					  并且这种方式，可以使表现和行为进一步的分离

					*/

					toggleClass(box,"b2");

				}

				btn02.onclick=function(){

					removeClass(box,"b2");

				}

			};

			// 定义一个函数，用来向一个元素中添加指定的class属性值

			/*

			 - 参数：

			   obj:要添加class属性的元素

			   cn:要添加的class值

			*/

			function addClass(obj, cn) {

				// 检查obj中是否含有cn》

				if (!hasClass(obj, cn)) {

					obj.className += " " + cn;

				}

			}

			/*

			判断一个元素中是否含有指定的class属性值

			 - 参数：

			   obj:

			   cn:

			*/

			function hasClass(obj, cn) {

				// 判断obj中有没有cn class

				// 创建一个正则表达式

				// var reg=/\bb2\b/;

				var reg = new RegExp("\\b" + cn + "\\b");

				return reg.test(obj.className);

			}

			// 删除一个元素中的指定的class属性

			function removeClass(obj, cn) {

				// 创建一个正则表达式

				var reg = new RegExp("\\b" + cn + "\\b");

				// 删除class

				obj.className = obj.className.replace(reg, "");

			}

			/*

			toggleClass可以用来切换一个类

			  - 如果元素中具有该类,则删除

			  - 如果元素中没有该类,则添加

			*/

			function toggleClass(obj,cn){

				// 判断obj中是否含有cn

				if(hasClass(obj,cn)){

					// 有,则删除

					removeClass(obj,cn);

				}else{

					addClass(obj,cn);

				}

			}

		</script>

	</head>

	<body>

		<button id="btn01">点击按钮以后修改box的样式</button><br><br>

		<button id="btn02">点击按钮以后删除box的样式</button><br><br>

		<div id="box" class="b1"></div>

	</body>

</html>

CSS类的操作的更多相关文章

  1. jQuery 获取并设置 CSS 类

    通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - ...

  2. 使用HTML5里的classList操作CSS类

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

  3. JQuery：JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  4. 第88天：HTML5中使用classList操作css类

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

  5. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  6. js动态给当前点击元素添加css类

    1.页面:

  7. 深入理解脚本化CSS系列第三篇——脚本化CSS类

    前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...

  8. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  9. jQuery_03之事件、动画、类数组操作

    一.事件: 1.模式触发事件:  ①DOM:elem.onXXX();只能触发直接用onXXX绑定的事件处理函数:用addEventistener添加的事件监听无法模拟出发触发:  ②jQuery:$ ...

随机推荐

  1. python中的random模块简析

    在Python生成随机数用random模块,下面的文章是本人自己简单总结的ython生成随机数与random模块中最常用的几个函数的关系,希望对大家有所帮助. random.random()用于生成随 ...

  2. flask实现验证码并验证

    效果图: 点击图片.刷新页面.输入错误点击登录时都刷新验证码 实现步骤: 第一步:先定义获取验证码的接口 verificationCode.py #验证码 @api.route('/imgCode') ...

  3. linux下信号量可设值的函数操作

    #include <sys/types.h>#include <sys/ipc.h>#include <sys/sem.h>#include <errno.h ...

  4. Socket模拟SSH

    Socket模拟SSH 主要思路 客户端发送相关命令到服务端,服务端执行命令(通过subprocess模块实现)然后将结果返回给客户端 小知识 Linux中可以发送空数据,服务端能接受到空数据 win ...

  5. JDK官方下载

    平时进行java开发时避免不了使用jdk,而现在jdk版本已经到1.9了,但是之前版本下载在官方网站就不好找了(主要还是因为网站是英文的): 进入官网下载jdk的前提是进入官网,直接百度搜jdk下载也 ...

  6. .Net Core下使用MQTT协议直连IoT平台

    [摘要] .Net平台通过原生MQTT接口,作为南向设备对接OceanConnect平台 因为种种历史原因吧,目前华为平台上对.net的支持案例SDK确实比较少,当看到各种语言的SDK和Demo,唯独 ...

  7. 严格次短路的求法-spfa

    #include<iostream> #include<cstdio> #include<algorithm> #include<queue> #inc ...

  8. NRF52810和NRF52832的区别

    NRF52832和NRF52810都是蓝牙5.0的芯片 均是出至NORDIC. 主要区别是 1.NRF52810的Flash是192KB/ RAM是24KB    NRF52832的Flash是512 ...

  9. 消息通知机制(NSNotification和NSNotificationCenter)

    作者:FlyElephant 出处:http://www.cnblogs.com/xiaofeixiang iOS中委托模式和消息机制基本上开发中用到的比较多,一般最开始页面传值通过委托实现的比较多, ...

  10. Springboot结合Redis

    安装 Redis   安装 gcc Yum install gcc-c++ 解压 redis.3.0.0.tar.gz 压缩包 tar -zxvf redis-3.0.0.tar.gz 进入解压后的目 ...