作业
<!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>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.w {
width: 900px;
margin: 0 auto;
}
.controls textarea {
width: 878px;
height: 100px;
resize: none;
border-radius: 10px;
outline: none;
padding-left: 20px;
padding-top: 10px;
font-size: 18px;
}
.controls {
overflow: hidden;
}
.controls div {
float: right;
}
.controls div span {
color: #666;
}
.controls div .useCount {
color: red;
}
.controls div button {
width: 100px;
outline: none;
border: none;
background: rgb(0, 132, 255);
height: 30px;
cursor: pointer;
color: #fff;
font: bold 14px '宋体';
transition: all 0.5s;
}
.controls div button:hover {
background: rgb(0, 225, 255);
}
.controls div button:disabled {
background: rgba(0, 225, 255, 0.5);
}
.contentList {
margin-top: 50px;
}
.contentList li {
padding: 20px 0;
border-bottom: 1px dashed #ccc;
}
.contentList li .info {
position: relative;
}
.contentList li .info span {
position: absolute;
top: 15px;
left: 100px;
font: bold 16px '宋体';
}
.contentList li .info p {
position: absolute;
top: 40px;
left: 100px;
color: #aaa;
font-size: 12px;
}
.contentList img {
width: 80px;
border-radius: 50%;
}
.contentList li .content {
padding-left: 100px;
color: #666;
word-break: break-all;
}
.contentList li {
display: flex;
justify-content: space-between;
align-items: center;
}
.contentList li img {
vertical-align: middle;
margin-right: 30px;
}
.contentList li button {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #afaaaa;
border: 0px;
border-radius: 15px;
margin-left: 20px;
filter: blur(.3);
}
</style>
</head>
<body>
<div class="w">
<div class="controls">
<img src="./images/tip.png" alt=""><br>
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul>
</ul>
</div>
</div>
<script>
let textarea = document.querySelector(".controls textarea")
let useCount = document.querySelector(".useCount")
textarea.addEventListener("input",function(){
useCount.innerHTML = textarea.value.length
})
let btna = document.querySelector(".controls div button")
let ul = document.querySelector(".contentList ul")
btna.addEventListener("click",function(){
let newLi = document.createElement("li")
newLi.innerHTML = `
<img src="./images/03.jpg" alt="">
<div class="info">
<span></span>
<p></p>
</div>
<div>${textarea.value}</div>
<button>按钮</button>
`
ul.insertBefore(newLi,ul.firstChild)
})
</script>
</body>
</html>
笔记
改元素对象的属性
普通属性:元素对象.属性名 = 属性值
console.log(btn.getAttribute("id(,id名)"))
Style样式属性
1、元素对象.style.属性名=“属性值“
box. style. color = "green"
box. style.backgroundColor = "red"
2、className 会覆盖掉原米的类名
(放两个就可以不覆盖了)
3. classlist
添加
box.classList.add("new")
删除
box. classList. remove ("box")
切换
box. classlist.toggle(有就删 没有就加)
Offset属性
四个只读
节点
节点的查找
创建节点
克隆
事件(事件源 事件类型 事件对象)
事件监听
事件源
事件对象
捕捉键盘事件
Change input事件等等 获取焦点focus 失去焦点blur
鼠标移入mouseinter
鼠标移出mouseleave