<!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>