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. 【搞定面试官】谈谈你对JDK中Executor的理解？

    ## 前言 随着当今处理器计算能力愈发强大,可用的核心数量越来越多,各个应用对其实现更高吞吐量的需求的不断增长,多线程 API 变得非常流行.在此背景下,Java自JDK1.5 提供了自己的多线程框架 ...

  2. PythonI/O进阶学习笔记_7.python动态属性，__new__和__init__和元类编程（上）

    content: 上: 1.property动态属性 2.__getattr__和__setattr__的区别和在属性查找中的作用 3.属性描述符 和属性查找过程 4.__new__和__init__ ...

  3. scrapy抓取国家社科基金项目数据库

    1.明确任务 目标网站:http://fz.people.com.cn/skygb/sk/index.php/Index/seach 抓取任务:抓取近五年某关键词(例如"能源".” ...

  4. pynlp报错：pynlpir.LicenseError: Your license appears to have expired. Try running "pynlpir update"解决办法。

    使用pyltp做文本挖掘时报错: pynlpir.LicenseError: Your license appears to have expired. Try running "pynlp ...

  5. Selenium WebDriver 中鼠标事件

    鼠标点击操作  鼠标点击事件有以下几种类型:  清单 1. 鼠标左键点击   Actions action = new Actions(driver);action.click();// 鼠标左键在当 ...

  6. 关于for循环中使用setTimeout

    我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此 ...

  7. python numpy学习

    以下代码来源于本博文作者观看大神视频并纯手敲. 目录 numpy的属性 创建array numpy的运算1 随机数生成以及矩阵的运算2 numpy的索引 array合并 array分割 numpy的浅 ...

  8. FileReader.result

    FileReader.result 该属性返回文件的内容.此属性仅在读取操作完成后才有效,并且数据的格式取决于用于启动读取操作的方法.FileReader]**result** 句法 var file ...

  9. MyEclispe启动Tomcat7时出现错误The servlets named [LoginServlet] and [com.liu.control.LoginServlet] are both

    刚开始尝试写Servlet代码,第一天就碰到这个错误,在网上找了很多资料才找到解决办法,在此记录一下. org.apache.catalina.LifecycleException: Failed t ...

  10. lerna式升级

    有段时间没更新博客了,是时候更新一波了. 之前不是vue-next出了吗,然后就去学习了一下,发现整个目录不是那么熟悉了,变成这样了: 于是就这个线索去研究了一下,发下这是用的 lerna + yar ...