HTMLDOM_innerHTML:
标签体的设置和获取:innerHTML
innerHTML
属性可用于获取或替换 HTML 元素的内容。
innerHTML
属性可用于获取或改变任何 HTML 元素,包括 <html>
和 <body>
。
代码实现:
<head> <meta charset="UTF-8"> <title>HTMLDOM</title> </head> <body> <div id="div1"> 传智博客 </div> <script> let div1 = document.getElementById("div1"); let innerHTML = div1.innerHTML;//获取标签体内容 // alert(innerHTML); //div标签中替换一个文本输入框 // div1.innerHTML = "<input type='text'>"; //div标签中追加一个文本框 div1.innerHTML += "<input type='text'>"; </script> </body>
简化动态表格案例:
<head> <meta charset="UTF-8"> <title>动态表格添加</title> <style> table{ border: 1px solid; margin: auto;/* 外边距居中 */ width: 500px; } td,th{ text-align: center;/* 文字居中 */ border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input id="id" type="text" placeholder="请输入编号"> <input id="name" type="text" placeholder="请输入姓名"> <input id="gender" type="text" placeholder="请输入性别"> <input id="btn_add" type="button" value="添加"> </div> <table> <caption>学生信息表</caption><!-- 标题 --> <tr> <!-- 表头 --> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <!-- 身体 --> <td>1</td> <td>斗</td> <td>园</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>2</td> <td>天</td> <td>神</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>3</td> <td>幻</td> <td>灭</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> </table> <script> /* 使用innerHTML来实现追加效果 */ //1获取按钮 document.getElementById("btn_add").onclick = function () { //2获取文本框的内容 let id = document.getElementById("id").value; let name = document.getElementById("name").value; let gender = document.getElementById("gender").value; //获取table let table = document.getElementsByTagName("table")[0]; table.innerHTML += " <tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+gender+"</td>\n" + " <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" + " </tr>"; } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body>
HTMLDOM_样式控制:
使用html元素对象的属性
控制元素样式
1.使用元素的style属性来设置
<script> //获取id let div1 = document.getElementById("div1"); //绑定点击事件 div1.onclick = function (){ //修改样式方式一 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size-->fontSize div1.style.fontSize = "20px"; } </script>
2.提前定义好类选择器的样式,通过元素的className属性来设置器class属性值
<head> <meta charset="UTF-8"> <title>控制样式</title> <style> .d1{ border: 1px solid red; width: 100px; height: 100px; } .d2{ border: 1px solid blue; width: 200px; height: 200px; } </style> </head> <body> <div id="div2"> div </div> <script> let div2 = document.getElementById("div2"); div2.onclick = function (){ //设置属性值 样式为d2 div2.className = "d2"; } </script> </body>
原文地址:http://www.cnblogs.com/hungui/p/16926244.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性