js获取元素的实际尺寸代码实例
分类:实例代码
本章节分享一段代码实例,它实现了获取元素实际尺寸的功能。
元素的实际尺寸应该包含width+padding+border。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> #antzone { width:200px; height:100px; border:10px solid red; padding:20px; text-align:center; line-height:100px; } </style> <script type="text/javascript"> window.onload = function () { antzone.innerHTML = "宽度:" + antzone.offsetWidth + "高度" + antzone.offsetHeight; } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
特别说明一下,id属性值可以直接当做对应的元素对象使用。
相关阅读:
(1).offsetWidth可以参阅js offsetWidth一章节。
(2).offsetHeight可以参阅js offsetHeight一章节。
js获取元素的实际尺寸代码实例,这样的场景在实际项目中还是用的比较多的,关于js获取元素的实际尺寸代码实例就介绍到这了。
js获取元素的实际尺寸代码实例属于前端实例代码,有关更多实例代码大家可以查看。