js对dom元素的操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档树的操作</title>
</head>
<body>
<div id="out">
<span id="middle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class = "change">5</li>
</ul>
</span>
</div>
<a href="javascript:void(0)">改变li的css样式和内容</a>
<button name = "chli">添加div边框</button>
<button name = "chli">取消iv边框</button>
</body>
</html>
<style>
.out{background:lightgrey;border:1px solid red;}
</style>
<script>
//id获取dom
var out = document.getElementById('out');
out.style.width="300"
out.style.height="300"
//name获取
let btn2 = document.getElementsByName('chli');
btn2[0].onclick = function(){
out.setAttribute('class',"out");
}
btn2[1].onclick = function(){
out.setAttribute('class',"");
}
//tagname获取
document.getElementsByTagName('a')[0].onclick = function(){
out.children[0].children[0].children[2].textContent = "我改变了"
}
//css样式获取
document.querySelector('.change').innerHTML = "2332"
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.模拟客 服聊天：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天界面</title>
</head>
<body>
<button id="create_chat">点击聊天</button>
</body>
<style>
li{list-style-type:none;line-height:30px;height:30px;width:100%;margin:auto;margin-top:5px;}
img{height:20px;widht:20px;}
.div{height:700px;width:500px;border:lightgrey solid 1px;margin:auto;}
.chat{width:100%;height:500px;background-color:lightgrey;overflow:auto}
.input_chat{width:99%;height:200px;}
.fr{float: right}
.fl{float: left;}
.text_r{text-align:right}
</style>
<script>
//创建聊天区域
document.getElementById('create_chat').onclick = function(){
let div = document.createElement('div');
var str = "<div class ='chat'><ul id='chat_ul'></ul></div>";
str += "<textarea class ='input_chat' id = 'input_chat'></textarea>"
str += "<div><button class='fr' onclick='chat_sub()'>提交</button></div>"
div.innerHTML = str
div.classList.add('div')
document.body.appendChild(div)
this.style.display= 'none'
}
//客 户点击提交按钮，提交输入内容
function chat_sub(){
var kh_msg = document.getElementById('input_chat')
if(kh_msg.value ==""){
alert("请输入内容")
}else{
app_li(kh_msg.value,1,"text_r")
kh_msg.value = ""
//输入客 服内容
setTimeout(function(){
let info = [
'真烦人,有话快说,别耽误我玩抖音',
'除了退货,退款,咱们什么都可以聊',
'说啥,本姑娘怎么听不懂呢?再说一遍',
'在我方便的时候再回复你吧~~',
'投诉我的人多了,你算老几~~~',
'真烦人,有话快说,别耽误我玩抖音',
'除了退货,退款,咱们什么都可以聊',
'说啥,本姑娘怎么听不懂呢?再说一遍',
'在我方便的时候再回复你吧~~',
'投诉我的人多了,你算老几~~~'
];
num = Math.ceil(Math.random()*10)
let kf_msg = info[num];
app_li(kf_msg,0,"text_l")
},2000);
}
}
//创建显示界面内的li,参数 聊天内容，客 户还是客 服0/1,左右排序，客 户排右，客 服排左
function app_li(msg,stat,text_alig){
let li = document.createElement('li')
let ul = document.getElementById('chat_ul')
li.classList.add(text_alig)
if(stat ==0){
li.innerHTML = "<img src='http://mat1.gtimg.com/www/images/qq2012/icon_yuewangga1.png'>" + msg
}else{
li.innerHTML = "<img src='https://mat1.gtimg.com/www/icon/favicon2.ico'>"+msg
}
ul.appendChild(li)
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
