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. Java基础IO类之字节输入输出流

    一.IO流概述 1.IO流:输入输出流(Input/Output) 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象,即数据在设备间的传输流, 流的本质是数据传输,根据数据传输特性将 ...

  2. Gitlab用户信息批量导出

    前言 因运维体系中涉及到用户权限管理及统计,需将Gitlab用户数据提取出来并录入到公司内部自建的权限统计平台. 本文将对Gitlab的用户信息数据批量导出进行操作说明! 思路 A)要对数据进行批量的 ...

  3. centos6安装pxc

    Percona XtraDB Cluster是一种高可用性解决方案,可帮助企业避免停机和中断. Percona XtraDB Cluster具有以下MySQL群集优势: • 具有成本效益的HA和MyS ...

  4. python名称空间和作用域

    python名称空间和作用域 名称空间 名称空间:例如a=1000,python解释器会开辟一块新的内存来存贮1000这个变量值,然后会有一个a指向这个1000,那么a存在哪里?其实他和变量值差不多, ...

  5. 分发系统介绍、expect脚本远程登录、expect脚本远程执行命令、expect脚本传递参数

    7月19日任务 20.27 分发系统介绍20.28 expect脚本远程登录20.29 expect脚本远程执行命令20.30 expect脚本传递参数 20.27 分发系统介绍 公司业务逐渐扩大时, ...

  6. maven中的setting文件

      localRepository默认jar包下载到本地哪个目录下 pluginGroups 把自己的插件放在这里进行管理 这样不用写groupId和artifactId     一个生命周期包含很多 ...

  7. PHP fsockopen受服务器KeepAlive影响的解决

    在开发过程中常常遇到这样的需求,模拟浏览器访问某接口,并获取返回数据.我们比较常使用的方法是fsockopen与接口建立连接,然后发出指令,然后通过fgets接受返回值. 但是我们发现,通过PHP模拟 ...

  8. 用launchscreen.storyboard适配启动图方法(二)

    背景 之前有写一篇实现方式比较简单的随笔用launchscreen.storyboard适配启动图方法,顺便在评论区提了一下用autolayout适配启动图的思路,现把思路和流程记录下来. 思路 整体 ...

  9. docker镜像、docker容器导入导出命令

    一.docker镜像导入导出命令 导出命令: docker save -o <保存路径> <镜像名称:标签> docker save -o ./test.tar test:la ...

  10. hoverdir

    js 引入  jq  &&  modernizr.custom.97074.js  &&jquery.hoverdir.js css 引入style.css html代 ...