Dom操作元素
innerText、innerHTML、value(input and textarea用到)
更改屬性，樣式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;}.div1 {background-color: pink;}.div2 {background-color: #45b892;}.div3 {background-color: #680fbb;}</style>
</head><body><div class="div1" onclick="changediv1()">HelloWorld</div><div class="div2" onclick="changediv2()">HelloWorld</div><div class="div3">HelloWorld</div><script>var div1 = document.querySelector('.div1')var div2 = document.querySelector('.div2')function changediv1() {if (div1.className == 'div1') {div1.className = "div2"}else div1.className = 'div1'}function changediv2() {if (div2.style.color === 'black') {div2.style.color = 'white'}else div2.style.color = 'black'}</script>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1 {height: 200px;width: 400px;}.bg0 {background-color: #16ce50;}.bg1 {background-color: #c3f10b;}.bg2 {background-color: #5100ff;}.bg3 {background-color: #ff00cc;}.bg4 {background-color: #ff0008;}</style>
</head><body><div class="div1">這是第一個標簽</div><div class="div1">這是第二個標簽</div><div class="div1">這是第三個標簽</div><div class="div1">這是第四個標簽</div><div class="div1">這是第五個標簽</div><script>var divs = document.getElementsByClassName('div1')for (var i = 0; i < divs.length; i++) {var div = divs[i]div.setAttribute('index', i)div.onclick = function () {var index = this.getAttribute('index')console.log(index);console.log(this.innerText);console.log(this);console.log(div);var bg = 'bg' + indexthis.classList.add(bg)}}</script>
</body></html>?// 請在這里編寫代碼，根據需求，使得圖片達到景深效果
? ? ? document.querySelector('.img1').style.filter='blur(0px)'
? ? ? document.querySelector('.img2').style.filter='blur(0px)'
grid布局例子：考拉
html,
body {background: #f8d8ab;width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;
}.container {display: flex;flex-direction: column;align-items: center;
}.ears {display: flex;justify-content: space-between;position: relative;top: 240px;width: 550px;
}.ear {width: 250px;height: 250px;border-radius: 50%;background: #738394;display: flex;justify-content: center;align-items: center;
}.inner {width: 150px;height: 150px;border-radius: 50%;background: #f6b9bf;
}.face {z-index: 1;width: 430px;height: 380px;background: #a0abb6;border-radius: 50%;align-items: center;display: grid;grid-template-columns: 1fr 25px 25px 25px 25px 1fr;grid-template-rows:50px 1fr 1fr 50px ;/* 創造一個網格布局6 個縱列（column） -- 前后兩列兩等分 (可用 fr 代表一份)，中間 4 列均為 25px 寬度4 個橫行（row） -- 上下均為 50px，中間兩等分*/
}.eye {/* 長為 30px高為 30px顏色為 #090b0e圓角為 50%位置居中*/width: 30px;height: 30px;background-color: #090b0e;border-radius: 50%;justify-self: center;align-self: center;}.eye.left {/* 按照圖示選取 grid-area */grid-area: 2/2;
}.eye.right {/* 按照圖示選取 grid-area */grid-area: 2/5;
}.nose {/* 高為 100%顏色為 #3b464f上方圓角為 50%下方圓角為 40%按照圖示選取 grid-area*/height: 100%;background-color: #3b464f;border-radius: 50% 50% 40% 40%;grid-area: 3/2/4/6;
}.blush {/* 長為 40px高為 30px顏色為 #f6b9bf圓角為 50%*/width: 40px;height: 30px;background-color: #f6b9bf;border-radius: 50%;
}.blush.left {/* 按照圖示選取 grid-area并調整位置*/grid-area: 2/1;justify-self: flex-end;align-self: flex-end;
}.blush.right {/* 按照圖示選取 grid-area并調整位置*/grid-area: 2/6;justify-self: flex-start;align-self: flex-end;
}
電影院排座：flex
* {box-sizing: border-box;
}body {background-color: #242333;color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;margin: 0;
}.container {perspective: 1000px;width: 470px;
}.screen {background-color: #fff;height: 70px;width: 100%;transform: rotateX(-45deg);box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);color: #242333;text-align: center;line-height: 70px;font-size: 30px;
}.seat {background-color: #444451;height: 40px;width: 45px;border-top-left-radius: 10px;border-top-right-radius: 10px;
}/* TODO：待補充代碼 */
.screen {margin-bottom: 50px;
}.seat-area {display: flex;flex-wrap: wrap;
}.seat {margin-left: 10px;margin-bottom: 10px;
}.seat:nth-child(8n) {margin-right: 0px;
}
.seat:nth-child(8n+2) {margin-right: 20px;
}.seat:nth-child(8n+6) {margin-right: 20px;
}.seat:nth-child(8n+1) {margin-left: 0px;
}? /* TODO: 請在此補充代碼實現tab欄動態固定 */
? position: sticky;
? top: 0px;
}
Dom事件綁定的三種方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1,.div2,.div3 {font-size: 20px;}.bg1 {background-color: #ff0000;}.bg2 {background-color: #aeff00;}.bg3 {background-color: #3900e6;}</style>
</head><body><div class="div1" onclick="fun1(this)">這是第一個標簽</div><div class="div2">這是第二個標簽</div><div class="div3">這是第三個標簽</div>
</body><script>var div1 = document.querySelector('.div1')var div2 = document.querySelector('.div2')var div3 = document.querySelector('.div3')div1.setAttribute('index', 1)div2.setAttribute('index', 2)div3.setAttribute('index', 3)function fun1(that) {console.log(this);console.log(that);var index = that.getAttribute('index')that.classList.add('bg' + index)}div2.onclick = function () {console.log(this);var index = this.getAttribute('index')this.classList.add('bg' + index)}div3.addEventListener('click', function () {console.log(this);var index = this.getAttribute('index')this.classList.add('bg' + index)})</script></html>
)
)
并查集 問題 C: How Many Tables)
