js两列等高代码实例
分类:实例代码
本章节分享一段代码实例,它实现了设置两列等高的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> body { padding: 0; margin: 0; color: #f00; } .container { width: 600px; margin: 0 auto; border: 3px solid #00c; overflow: hidden; } #left { width: 150px; float: left; background: #b0b0b0; } #right { width: 450px; float: left; background: #6cc; } #antzone { height:300px; } </style> <script> window.onload = function () { var oleft = document.getElementById("left"); var oright = document.getElementById("right"); var oleftH = oleft.offsetHeight; var orightH = oright.offsetHeight; oleftH > oright ? oright.style.height = oleftH + "px" : oleft.style.height = orightH + "px" } </script> </head> <body> <div class="container"> <div id="left">前端教程网一</div> <div id="right"> <div id="antzone"></div> </div> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中代码。
(2).var oleft = document.getElementById("left"),获取id属性值为left的元素对象。
(3).var oright = document.getElementById("right"),获取id属性值为right的元素对象。
(4).var oleftH = oleft.offsetHeight,获取元素对象的高度。
(5).var orightH = oright.offsetHeight,获取元素对象的高度。
(6).oleftH > oright ? oright.style.height = oleftH + "px" : oleft.style.height = orightH + "px",去高度值较高者进行设置。
二.相关阅读:
(1).offsetHeight可以参阅js offsetHeight一章节。
(2).三元运算符可以参阅javascript 三元运算符一章节。
js两列等高代码实例,这样的场景在实际项目中还是用的比较多的,关于js两列等高代码实例就介绍到这了。
js两列等高代码实例属于前端实例代码,有关更多实例代码大家可以查看。