dom操作代码实例
分类:实例代码
dom操作代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了用javascript操作dom的功能。
都是非常基础的操作,比如设置尺寸背景颜色等。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #eee; font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体"; } #box { font-size: 12px; height: 200px; width: 400px; margin: 100px auto; } #txt { height: 200px; width: 150px; text-align: center; margin: 0 auto; line-height: 20px; background: #f7f9fb; box-shadow: 3px 3px 3px #000; border-left: 2px dashed #ccc; } h2 { padding-top: 25px; } p { padding-top: 5px; } .bottom-button { text-align: center; margin-top: 20px; } </style> <script type="text/javascript"> //定义"改变颜色"的函数 function changeColor() { document.getElementById("txt").style.color = "#fff"; document.getElementById("txt").style.backgroundColor = "#6ac3fc"; } //定义"改变宽高"的函数 function changeSize() { document.getElementById("txt").style.width = "180px"; document.getElementById("txt").style.height = "220px"; } //定义"隐藏内容"的函数 function hideContent() { document.getElementById("txt").style.display = "none"; } //定义"显示内容"的函数 function displayContent() { document.getElementById("txt").style.display = "block"; } //定义"取消设置"的函数 function cancelSet() { var txt = confirm("是否取消设置?"); if (txt == true) { document.getElementById("txt").removeAttribute("style"); } } </script> </head> <body> <div id="box"> <div id="txt"> </div> <form class="bottom-button"> <input type="button" value="改变颜色"> <input type="button" value="改变宽高"> <input type="button" value="隐藏内容"> <input type="button" value="显示内容"> <input type="button" value="取消设置"> </form> </div> </body> </html>
dom操作代码实例,这样的场景在实际项目中还是用的比较多的,关于dom操作代码实例就介绍到这了。