首页 > 编程笔记 > JavaScript笔记 阅读:107

JS获取元素的宽度和高度

在 JavaScript 中,使用元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的包含边框的宽度和高度;而 clientWidth 和 clientHeight 属性则可以分别获取元素的不包含边框的宽度和高度。

这些属性值包含的内容如下:
在实际应用中,经常需要让一个元素在视窗中居中显示,此时需要确定元素的定位 left 和 top 属性值,这两个值可使用下面的公式来确定:

元素的 left=(可视区域宽-元素的宽)/2
元素的 top=(可视区域高-元素的高)/2


其中,可视区域宽和高又可以使用以下格式的代码来获取:

可视区域宽度=document.documentElement.clientWidth
可视区域高度=document.documentElement.clientHeight


元素在一个视窗中居中显示的具体代码请参见例 1。

【例 1】设置元素在视窗中居中显示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素在视窗中居中显示</title>
<style>
   #div1{width:100px;height:100px;background:red;border:10px solid #00BFFF;
           position:absolute;}
</style>
<body>
  <div id="div1">
  <script>
     var oDiv = document.getElementById('div1');
     var clientW = document.documentElement.clientWidth;
     var clientH = document.documentElement.clientHeight;
     var divW = oDiv.offsetWidth;
     var divH = oDiv.offsetHeight;
     oDiv.style.left = (clientW-divW)/2+'px';
     oDiv.style.top = (clientH-divH)/2+'px';
  </script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
元素在视窗中居中显示
图 1:元素在视窗中居中显示

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章