javascript高度,js元素高度

如何使用 JavaScript 获取页面，窗口的高度

javascript里面document.body的clientWidth、clientHeight、offsetWidth  、offsetHeight 等属性可以获得网页可见区域的宽和高，window和window.screen也有一些相关属性，例子代码如下：

创新互联建站主营阿勒泰网站建设的网络公司,主营网站建设方案,成都app软件开发,阿勒泰h5微信小程序开发搭建,阿勒泰网站营销推广欢迎阿勒泰等地区企业咨询

bodySCRIPT LANGUAGE="JavaScript"

var  s = "";

s += "\r\n网页可见区域宽："+ document.body.clientWidth;

s += "\r\n网页可见区域高："+ document.body.clientHeight;

s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线和滚动条的宽)";

s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

s += "\r\n网页正文全文宽："+ document.body.scrollWidth;

s += "\r\n网页正文全文高："+ document.body.scrollHeight;

s += "\r\n网页被卷去的高："+ document.body.scrollTop;

s += "\r\n网页被卷去的左："+ document.body.scrollLeft;

s += "\r\n网页正文部分上："+ window.screenTop;

s += "\r\n网页正文部分左："+ window.screenLeft;

s += "\r\n屏幕分辨率的高："+ window.screen.height;

s += "\r\n屏幕分辨率的宽："+ window.screen.width;

s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;

s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;

s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

alert(s);

/SCRIPT

javascript中怎么高度

HTML代码

body

div class="father" id="father"

h3这是父元素，屏幕分辨率是1366*768/h3

div class="son" id="son"

h3这是子元素，祝大家国庆快乐 /h3

div class="grandson" id="grandson"

h3这是孙子元素，祝大家国庆快乐 /h3

h3我的博客:;/h3

h3程序爱好者QQ群:/h3

h3259280570 /h3

h3欢迎你加入 /h3

h3国庆快乐 /h3

/div

/div

/div

div class="data"

h3数据输出/h3

div id="data"/div

/div

/body

CSS代码

*

{

margin: 0 auto;

}

.father

{

width: 500px;

height: 750px;

border: 5px solid red;

float: left;

}

.son

{

width: 400px;

height: 300px;

border: 5px solid black;

margin: 20px;

}

.grandson

{

width: 150px;

height: 100px;

border: 5px solid blue;

margin: 20px;

overflow: auto;

}

.data

{

width: 600px;

height: 750px;

border: 5px solid red;

float: left;

margin-left: 15px;

}

JS代码

window.onload = function()

{

/*获取元素对象*/

var father = document.getElementById('father');

var son = document.getElementById('son');

var grandson = document.getElementById('grandson');

var data = document.getElementById('data');

data.innerHTML = "h3获取视窗大小(跟窗口大小有关)/h3";

data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"br/";

data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"br/";

data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"br/";

data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"br/";

data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"br/";

data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"br/";

data.innerHTML += "h3获取元素自身大小(跟是否有滚动条无关)/h3";

data.innerHTML += ".son自身宽度(offsetWidth属性，包括左右边框)："+son.offsetWidth+"br/";

data.innerHTML += ".son自身高度(offsetHeight属性，包括上下边框)："+son.offsetHeight+"br/";

data.innerHTML += ".son可视宽度(clientWidth属性，不包括左右边框)："+son.clientWidth+"br/";

data.innerHTML += ".son可视高度(clientHeight属性，不包括上下边框)："+son.clientHeight+"br/";

data.innerHTML += "h3获取.grandson滚动大小和可视大小/h3";

data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"br/";

data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"br/";

data.innerHTML += ".grandson可视宽度(clientWidth属性，不包括竖直滚动条和border)："+grandson.clientWidth+"br/";

data.innerHTML += ".grandson可视高度(clientHeight属性，不包括水平滚动条和border)："+grandson.clientHeight+"br/";

data.innerHTML += "h3获取.grandson被卷去的大小(跟滚动条的位置有关)/h3";

data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动条滑到最底端)："+grandson.scrollTop+"br/";

data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动条滑到最右端)："+grandson.scrollLeft+"br/";

data.innerHTML += "h3获取浏览器窗口位置(跟窗口大小有关)/h3";

/*

*IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持这个两个属性；

*Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持这个两个属性；

*/

var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;

var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;

data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"br/";

data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"br/";

data.innerHTML += "h3获取屏幕分辨率/h3";

data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"br/";

data.innerHTML += "屏幕分辨率的宽(window.screen.width)："+ window.screen.width+"br/";

data.innerHTML += "h3获取屏幕可用的高宽/h3";

data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"br/";

data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth)："+ window.screen.availWidth+"br/";

data.innerHTML += "h3获取.father的边框大小/h3";

data.innerHTML += ".father上边框(clientTop)："+ father.clientTop+"br/";

data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"br/";

data.innerHTML += "h3获取.son到父元素边界的距离(即对应margin+父元素对应的border)/h3";

data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"br/";

data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"br/";

}

javascript设置表格的宽度和高度

window.outerheight

窗口总高度

和window.screen.availheight一样

window.innerheight

窗口可视区域高度

window.screen.height

显示器屏幕高度

另外：jquery获取高度

$(".thiscrumbs").height()

元素本身高度

$(".thiscrumbs").innerheight()

元素高度+内边距

$(".thiscrumbs").outerheight()

元素高度+内边距+边框

$(".thiscrumbs").outerheight(true)

元素高度+内边距+边框+外边距

JavaScript获取网页、浏览器、屏幕高度和宽度汇总

经常发现在写JavaScript的时候，都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题，时常前用后忘，要不就是在网上search，干脆自己总结一下，这样也方便再次使用，省时省力。

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth

(包括边线的宽)

网页可见区域高：document.body.offsetHeight

(包括边线的宽)

网页正文全文宽：document.body.scrollWidth

（带滚动条宽）

网页正文全文高：document.body.scrollHeight

（带滚动条高）

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop

网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight:

获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标

offsetParent

属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由

offsetParent

属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由

offsetTop

属性指定的父坐标的计算顶端位置

event.clientX

相对文档的水平座标

event.clientY

相对文档的垂直座标

event.offsetX

相对容器的水平坐标

event.offsetY

相对容器的垂直坐标

document.documentElement.scrollTop

垂直方向滚动的值

event.clientX+document.documentElement.scrollTop

相对文档的水平座标+垂直方向滚动的量

IE，FireFox

差异如下：

IE6.0、FF1.06+：

复制代码

代码如下:

clientWidth

=

width

+

padding

clientHeight

=

height

+

padding

offsetWidth

=

width

+

padding

+

border

offsetHeight

=

height

+

padding

+

border

IE5.0/5.5：

复制代码

代码如下:

clientWidth

=

width

-

border

clientHeight

=

height

-

border

offsetWidth

=

width

offsetHeight

=

height

总结：关于高度和宽度的东西到是挺多的，具体的有些自己也没有弄懂，通过自己试验了一下，有些得出的值是一样，所以很让人迷惑，只能视情况而定了。