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. C#Windows Forms 计算器--xdd

    一.计算器 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  2. 2019年12月1日Linux开发手记

    配置ubuntu摄像头: 1.设置→添加→usb控制器→兼容usb3.0 2.虚拟机→可移动设备→web camera→连接(断开主机) 3.查看是否配置成功,打开终端,输入: susb ls /de ...

  3. 09-kubernetes StatefulSet

    目录 StatefulSet 简单测试 使用 StatefulSet 创建基础的PV StatefulSet 清单 StatefulSet 有状态应用副本集 无状态的, 更关注的是群体 有状态的, 更 ...

  4. salesforce lightning零基础学习(十六) 公用组件之 获取字段label信息

    我们做的项目好多都是多语言的项目,针对不同国家需要展示不同的语言的标题.我们在classic中的VF page可谓是得心应手,因为系统中已经封装好了我们可以直接在VF获取label/api name等 ...

  5. rsync工具、rsync常用选项、以及rsync通过ssh同步 使用介绍

    第8周5月14日任务 课程内容: 10.28 rsync工具介绍10.29/10.30 rsync常用选项10.31 rsync通过ssh同步 10.28 rsync工具介绍 rsync是一个同步的工 ...

  6. Linux:AWK基础

    AWK是一个强大的文本分析工具,算是Linux系统特别有用的命令了,在日志分析.文件内容分析中扮演特别重要的角色. AWK说明 简单来说awk就是把文件逐行的读入,以指定的分隔符将每行分割,分割后的部 ...

  7. NumPy 学习 第三篇：矢量化和广播

    矢量化 矢量化是指用数组表达式替换显式的for循环.在Python中循环数组或其他跟数组类似的数据结构时,使用循环会涉及很多开销.NumPy中的矢量化操作把内部循环委托给高度优化的C和Fortran函 ...

  8. flex布局的兼容问题

    一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 2011 versi ...

  9. Java修炼——容器HashMap用法

    直接上代码,容器集合之间的关系在后面我会继续详细分析,这次先看HashMap用法 HashMap的方法都在代码中有解释.有需要的可以仔细看看 package com.bjsxt.map; import ...

  10. [TimLinux] Python 模块

    1. 概念 模块是最高级别的程序组织单元,它将程序文件和数据封装起来以便重用.实际上,模块往往对应Python文件,每一个文件都是一个模块,并且模块导入其他模块之后就可以使用导入模块定义的变量,模块和 ...