clientheight,clientheight属性

http://www.itjxue.com  2023-01-23 16:14  来源:未知  点击次数: 

div 没有设置height 内容撑大···怎么获取高度啊, clientHeight offsetHeight style.height 都不行

如果你想固定高度,设置width(宽度)height(高度)display:block(成块) float:left(左浮动)和 overflow:hidden(禁止溢出)属性。应该就可以了

html常见宽高

网页可见区域宽: 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

在我本地测试当中:

在IE、FireFox、Opera下都可以使用

document.body.clientWidth

document.body.clientHeight

即可获得,很简单,很方便。

而在公司项目当中:

Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

如果在页面中添加这行标记的话

在IE中:

document.body.clientWidth == BODY对象宽度

document.body.clientHeight == BODY对象高度

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

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

在FireFox中:

document.body.clientWidth == BODY对象宽度

document.body.clientHeight == BODY对象高度

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

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

?

在Opera中:

document.body.clientWidth == 可见区域宽度

document.body.clientHeight == 可见区域高度

document.documentElement.clientWidth == 页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight == 页面对象高度(即BODY对象高度加上Margin高)

而如果没有定义W3C的标准,则

IE为:

document.documentElement.clientWidth == 0

document.documentElement.clientHeight == 0

FireFox为:

document.documentElement.clientWidth == 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight == 页面对象高度(即BODY对象高度加上Margin高)

Opera为:

document.documentElement.clientWidth == 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight == 页面对象高度(即BODY对象高度加上Margin高)

真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。

有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.

可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentElement.clientHeight 来获取了.

原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.

区别新旧标准的行是:

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““

前者指明该页面使用旧标准, 后者指明该页面使用新标准.

提问一下js里srolltop。元素的offset top clientHeight 是从哪里算的?

您好,这里是javascript中制作滚动代码的常用属性

页可见区域宽: 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;

offsetLeft

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

例如:

div id="tool"

input type="button" value="提交"

input type="button" value="重置"

/div

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。

“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。

“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。

以上属性在 FireFox 中也有效。

另 外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的),点击这里查看不同点。

标题:offsetTop 与 style.top 的区别

预备知识:offsetTop、offsetLeft、offsetWidth、offsetHeight

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的。

offsetHeight和clientHeight的区别

js中的clientHeight和offsetHeight的区别如下:

1、clientHeight

网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

注意:IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

2、offsetHeight

网页可见区域高:document.body.offsetHeight (包括边线的宽)

二者联系:

NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

(责任编辑:IT教学网)

更多

推荐网页文字特效文章