<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/tools.js"></script>
<title>轮播图实现</title>
<style>
*{
margin: 0;
padding: 0;
}
.b1{
width: 100px;
height: 100px;
background-color: red;
.b2{
width: 200px;
height: 200px;
background-color: yellow;
</style>
<script>
window.onload = function(){
// 获取 btn01
var btn01 = document.getElementById("btn01");
var box = document.getElementById("box");
btn01.onclick = function(){
// 修改box 样式
// box.style.width = "200px";
// box.style.height = "200px";
// box.style.backgroundColor = "yellow";
// 修改 box 的class 属性
// box.className = " b2";
// box.className += " b2";
// addClass(box,'b2')
// removeClass(box,'b2')
toggleClass(box,'b2')
}
// 定义一个函数 向一个元素中 添加指定的class属性值
/**
* obj 要添加 class属性的元素
* cn 要添加的class 值
*/
function addClass(obj, cn){
// 检查 obj 中是否含有cn
if(!hasClass(obj, cn)){
obj.className += " " + cn;
}
* 判断一个函数中是否含有 class 属性值
* 如果有 该 class 则返回true, 没有则返回false
function hasClass(obj, cn){
// 判断 obj 中有没有 cn class
// 创建一个 正则表达式
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
/**
* 删除一个 元素中指定的 class 属性
*/
function removeClass(obj, cn){
// 创建一个 正则表达式
var reg = new RegExp("\\b" + cn + "\\b");
obj.className = obj.className.replace(reg,'')
/**
* toggleClass 可以用来切换一个类
* 如果元素有该类 则删除
* 如果元素中没有 则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj, cn)){
// 有 删除
removeClass(obj, cn)
}else{
// 没有 就添加
addClass(obj, cn)
}
}
}
</script>
</head>
<body>
<button id="btn01">点击修改样式</button></button>
<br/> <br/>
<div id="box" class="b1"></div>
</body>
</html>
![特斯拉App4.13.0更新来了，可以直接在App上添加和删除5位驾驶员。累计可以邀请5位驾驶员，每次的邀请链接24小时[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)