CSS类的操作

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			.b1 {
  8. 				width: 100px;
  9. 				height: 100px;
  10. 				background-color: skyblue;
  11. 			}
  13. 			.b2 {
  14. 				/* width: 200px; */
  15. 				height: 200px;
  16. 				background-color: aquamarine;
  17. 			}
  18. 		</style>
  19. 		<script type="text/javascript">
  20. 			window.onload = function() {
  21. 				// 获取box
  22. 				var box = document.getElementById("box");
  23. 				// 获取btn01
  24. 				var btn01 = document.getElementById("btn01");
  25. 				// 获取btn02
  26. 				var btn02 = document.getElementById("btn02");
  27. 				// 为btn01绑定单击响应函数
  28. 				btn01.onclick = function() {
  29. 					// 修改box的样式
  30. 					/*
  31. 					通过style属性来修改元素的样式，没修改一个样式，浏览器就需要重新渲染一次页面
  32. 					  这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不方便
  33. 					*/
  34. 					// box.style.width="200px";
  35. 					// box.style.height="200px";
  36. 					// box.style.backgroundColor="yellow";
  38. 					// 修改box的class属性
  39. 					/*
  40. 					我们可以通过修改元素的class属性来间接的修改样式
  41. 					只需要一次，即可同时修改多个样式
  42. 					  浏览器只需要重新渲染页面一次，性能比较好
  43. 					  并且这种方式，可以使表现和行为进一步的分离
  44. 					*/
  45. 					toggleClass(box,"b2");
  46. 				}
  47. 				btn02.onclick=function(){
  48. 					removeClass(box,"b2");
  49. 				}
  50. 			};
  51. 			// 定义一个函数，用来向一个元素中添加指定的class属性值
  52. 			/*
  53. 			 - 参数：
  54. 			   obj:要添加class属性的元素
  55. 			   cn:要添加的class值
  56. 			*/
  57. 			function addClass(obj, cn) {
  58. 				// 检查obj中是否含有cn》
  59. 				if (!hasClass(obj, cn)) {
  60. 					obj.className += " " + cn;
  61. 				}
  63. 			}
  64. 			/*
  65. 			判断一个元素中是否含有指定的class属性值
  66. 			 - 参数：
  67. 			   obj:
  68. 			   cn:
  69. 			*/
  70. 			function hasClass(obj, cn) {
  71. 				// 判断obj中有没有cn class
  72. 				// 创建一个正则表达式
  73. 				// var reg=/\bb2\b/;
  74. 				var reg = new RegExp("\\b" + cn + "\\b");
  76. 				return reg.test(obj.className);
  78. 			}
  79. 			// 删除一个元素中的指定的class属性
  80. 			function removeClass(obj, cn) {
  81. 				// 创建一个正则表达式
  82. 				var reg = new RegExp("\\b" + cn + "\\b");
  84. 				// 删除class
  85. 				obj.className = obj.className.replace(reg, "");
  86. 			}
  87. 			/*
  88. 			toggleClass可以用来切换一个类
  89. 			  - 如果元素中具有该类,则删除
  90. 			  - 如果元素中没有该类,则添加
  91. 			*/
  92. 			function toggleClass(obj,cn){
  93. 				// 判断obj中是否含有cn
  94. 				if(hasClass(obj,cn)){
  95. 					// 有,则删除
  96. 					removeClass(obj,cn);
  97. 				}else{
  98. 					addClass(obj,cn);
  99. 				}
  100. 			}
  101. 		</script>
  102. 	</head>
  103. 	<body>
  104. 		<button id="btn01">点击按钮以后修改box的样式</button><br><br>
  105. 		<button id="btn02">点击按钮以后删除box的样式</button><br><br>
  106. 		<div id="box" class="b1"></div>
  107. 	</body>
  108. </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. vue通过控制boolean值来决定是否添加class类名

    vue通过控制boolean值来决定是否添加class类名

  2. Java 类、接口的API

    本章节收集的类/接口API有: Object类,枚举,包装类,接口Comparable,类Arrays,Thread类,System类,Math,BigInteger,Random,日期时间,异常 O ...

  3. CTF中遇到的php

    1.if(eregi("hackerDJ",$_GET[id])) {   //eregi字符串对比 echo("<p>not allowed!</p& ...

  4. .NET自动化对象映射

    对象自动映射工具是用来解决对象之间映射转换的类库,能很好地解决DTO和Model之间的相互映射赋值问题. 只要两个对象的属性具有相同名字(或者符合它规定的命名约定),对象自动映射工具就可以替我们自动在 ...

  5. 按照ID倒序查出某个字段不重复的集合

    一.需求 有如下一个表pp_test: id name 1 aa 2 bb 3 cc 4 aa 5 cc 6   要求查出name字段中不重复的值(不算空值),并且按照id的倒序排列(不必输出ID). ...

  6. AI：为你写诗，为你做不可能的事

    最近,一档全程高能的神仙节目,高调地杀入了我们的视野: 没错,就是撒贝宁主持,董卿.康辉等央视名嘴作为评审嘉宾,同时集齐央视"三大名嘴"同台的央视<主持人大赛>,这够不 ...

  7. jeecg培训第一课(代码生成与权限分配)

    问题描述:进口部要完成一票进口报关单的增删改查,操作员张三登录只能增删改张三的报关单,操作员李四登录只能增删改李四的报关单, 部门主管王五登录能查看张三和李四的报关单,但不能修改删除.操作员能提交报关 ...

  8. iOS开发之UIWebView

    转自:http://www.cnblogs.com/zhuqil/archive/2011/07/28/2119923.html UIWebView是iOS sdk中一个最常用的控件.是内置的浏览器控 ...

  9. 移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  10. [TimLinux] WireShark 安装篇——CentOS7

    1. 下载 libpcap: http://www.tcpdump.org/release/libpcap-1.9.0.tar.gz cmake: https://github-production- ...