CSS类的操作
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类的操作的更多相关文章
- jQuery 获取并设置 CSS 类
通过 jQuery,可以很容易地对 CSS 元素进行操作. 切换 CSS 类 jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - ...
- 使用HTML5里的classList操作CSS类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...
- JQuery：JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- 第88天：HTML5中使用classList操作css类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js动态给当前点击元素添加css类
1.页面:
- 深入理解脚本化CSS系列第三篇——脚本化CSS类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- jQuery_03之事件、动画、类数组操作
一.事件: 1.模式触发事件: ①DOM:elem.onXXX();只能触发直接用onXXX绑定的事件处理函数:用addEventistener添加的事件监听无法模拟出发触发: ②jQuery:$ ...
随机推荐
- Python-beautifulsoup库
#beautifulsoup库的安装 pip install beautifulsoup4 python -m pip install --upgrage pip from bs4 import Be ...
- Python文件和数据格式化（教程）
文件是一个存储在副主存储器的数据序列,可包含任何数据内容. 概念上,文件是数据的集合和抽象,类似的,函数是程序的集合和抽象. 用文件形式组织和表达数据更有效也更加灵活. 文件包括两种形式,文本文件和二 ...
- T1110-计算线段长度
原题链接: https://nanti.jisuanke.com/t/T1010 题目简述: 已知线段的两个端点的坐标A(Xa,Ya),B(Xb,Yb)A(X_a,Y_a),B(X_b,Y_b)A(X ...
- Java 大黑话讲解设计模式 -- UML类图
目录 1.啥是UML类图? 2.UML类图有啥用? 3.正式理解UML类图 4.使用idea画第一个UML类图 5.类之间的关系图[必须牢记] 6.类之间的关系 6.1.依赖 6.2.泛化 6.3.实 ...
- 国内开源C# WPF控件库Panuon.UI.Silver强力推荐
国内优秀的WPF开源控件库,Panuon.UI的优化版本.一个漂亮的.使用样式与附加属性的WPF UI控件库,值得向大家推荐使用与学习. 今天站长(Dotnet9,站长网址:https://dotne ...
- 剑指Offer-34.数组中的逆序对(C++/Java)
题目: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P%10000 ...
- 【Android - 自定义View】之自定义九宫格手势解锁控件
首先来介绍一下这个自定义View: (1)这个自定义View的名称叫做 LockView ,继承自View类: (2)这个自定义View实现了应用中常见的九宫格手势解锁功能,可以用于保证应用安全: ( ...
- Linux海量数据高并发实时同步架构方案杂谈
不论是Redhat还是CentOS系统,除去从CDN缓存或者数据库优化.动静分离等方面来说,在架构层面上,实 现海量数据高并发实时同步访问概括起来大概可以从以下几个方面去入手,当然NFS的存储也可以是 ...
- 计算购物车金额总和（ jquery ）
今天简单写了一个jq版购物车计算金额总和的例子,如图: 整体页面代码如下: <!DOCTYPE html> <html> <head> <meta chars ...
- MySQL主从扩展知识
6月29/7月2日任务 说明:这两天无新课,主要是扩充知识面注意:这两天的任务,需要回专贴.需要你们通过看这些东西总结成自己的心得. 不能照搬,必须要自己理解,能看多少就看多少,看不完也没有关系,但一 ...