您的位置:首页 > Web前端 > HTML

DOM--innerHTML属性用法

2020-06-04 09:05 169 查看
innerHTML属性的用法有两个:
1、返回表格行的开始和结束标签之间的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>
#tab{
margin: 0 auto;
color:cadetblue;
border: 1px solid #003E3E;
}
#but{
display: block;
margin:0 auto;
}
</style>
</head>
<body>
<table id="tab">
<tr id="bb">
<th>春花</th>
<th>秋月</th>
<th>何时了</th>
</tr>
<tr>
<th>小楼</th>
<th>昨夜</th>
<th>又东风</th>
</tr>
</table>
<br />
<br />
<input id="but" type="button" value="please chick it" onclick="aaa()">
<script>
function aaa(){
alert(document.getElementById("bb").innerHTML)
}
</script>
</body>
</html>

2、属性设置

<div id="myc" style="width:300px;height:100px;border:1px solid rgba(111,111,111,0.5)" onmousemove="getCoor(event)" onmouseout="clearCoor()"></div>
<div id="a"></div>
<script>
function getCoor(e){
x=e.clientX;
y=e.clientY;
document.getElementById("a").innerHTML="Coordinates:("+x+","+y+")";
}
function clearCoor(){
document.getElementById("a").innerHTML="";
}
</script>

(希望我的理解总结可以为需要的人带来帮助,若各位大佬看到我总结的不足,也希望您可以指出,谢谢)

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: