js获取html body的宽度,JS获取元素的宽度和高度

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

这些属性值包含的内容如下：

offsetWidth=左、右边框宽度+内容宽度+左、右内边距

offsetHeight=上、下边框宽度+内容高度+上、下内边距

clientWidth=内容宽度+左、右内边距

clientHeight=内容高度+上、下内边距

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

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

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

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

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

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

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

【例 1】设置元素在视窗中居中显示。

设置元素在视窗中居中显示

#div1{width:100px;height:100px;background:red;border:10px solid #00BFFF;

position:absolute;}

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';

上述代码在 Chrome 浏览器中的运行结果如图 1 所示。

图 1：元素在视窗中居中显示

js获取html body的宽度,JS获取元素的宽度和高度相关推荐

透彻理解块级元素的宽度
作者按:又翻出来一篇5年前(2006年12月28日)写的关于盒模型的文章,都不知道参考了哪本书了.只能凭印象感谢 Eric Meyer 的<CSS权威指南(第2版)>(The Defini ...
html如何用百分比绝对定位,绝对定位元素的宽度百分比是多少？
我绝对定位的元素被设置为100%的宽度,但即便如此,当它呈现时,它会创建一个水平滚动条并超出页面的边界.上面静态定位的元素在浏览器中查看时看起来更短,即使它们也跨越了整个宽度.绝对定位元素的宽度百分比 ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
JS获取元素的大小（高度和宽度）
JS获取元素的大小(高度和宽度) 在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度.如表所示. 元素尺寸属性说明 clientWidth 获取元素可视部分的宽度,即 CSS ...
在html上js添加宽度,js 获取div高度并重新设置div高度与宽度
js 获取div高度并重新设置div高度与宽度 js 获取div高度并重新设置div高度与宽度 var $=function(id) { return document.getElementById( ...
php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
php 获得图片大小,js获取图片大小_php 或js获取图片大小
摘要腾兴网为您分享:php 或js获取图片大小,之了课堂,云集,宜信,学堂在线等软件知识,以及手机东方财富通,航空证券软件,日历星座,大吉大利晚上吃鸡图片,一米鲜,熊猫云,sketchup动画,空文 ...
前端js获取图片大小扩展名_JS获取文件大小方法小结
本文实例总结了JS获取文件大小方法.分享给大家供大家参考,具体如下: 方法一,利用ActiveX控件实现: function getFileSize(filePath) { var fso = new ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
python读取html内容 dom获取_python学习笔记十三 JS，Dom（进阶篇）
JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

js获取html body的宽度,JS获取元素的宽度和高度

js获取html body的宽度,JS获取元素的宽度和高度相关推荐

最新文章

热门文章