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' + index
this.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>
