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. 并发编程--greenlet与gevent

    什么是greenlet? 虽然CPython(标准Python)能够通过生成器来实现协程,但使用起来还并不是很方便. 与此同时,Python的一个衍生版 Stackless Python实现了原生的协 ...

  2. 螺旋矩阵II

    Given a positive integer n, generate a square matrix filled with elements from 1 to n2 in spiral ord ...

  3. .NET Core应用框架AA介绍（二）

    AA的开源地址 https://github.com/ChengLab/AAFrameWork AA框架是一个基础应用框架,是建立在众多大家熟知的流行工具之上并与之集成.比如:ASP.NET Core ...

  4. 抖音抖一抖-SVG和CSS视觉故障艺术小赏

    故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺 ...

  5. SpringBoot 使用IDEA 配置热部署

    在开发中稍微更改一点内容就要重启,很麻烦.这个时候使用Spring Boot的热部署就能解决你的问题. 上图: 1,在pom.xml文件中添加依赖: <dependency> <gr ...

  6. python_tornado

    1.创建Tornado服务器    1.创建Application对象        Application是Torando最核心的类        所有关于服务器的配置信息都写在Applicatio ...

  7. 页面嵌套iframe的时候引发的js交互问题

    今天在做一个新页面的时候,用到了iframe这个东西.结果出现了一个有趣的问题.自己写的页面和iframe里边的页面属性和js有冲突.具体的点说就是层级出现了问题.不能正常显示.不管怎么修改,总是解决 ...

  8. Linux下搭建及配置禅道服务器详细过程-包含软件资源

    **1:百度云盘下载: ** 禅道--链接: https://pan.baidu.com/s/1Stu7nOZVIPO5TnpJWjWtiQ 提取码:dnik CentOs操作系统--链接: http ...

  9. Chrome快捷键吐血整理

    Chrom是平时开发过程中最常用到的浏览器,使用快捷键操作Chrome能提高我们的使用效率,而且可以脱离鼠标进行操作.本篇博客就对平时我们常用的Chrome快捷键做一个整理总结.大家拿走不谢,哈哈~~ ...

  10. luogu P2272 [ZJOI2007]最大半连通子图

    题目描述 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意两点u,v,存在一条u到v的有向路径或者从v到u的有向路径.若 ...