`
bsr1983
  • 浏览: 1117375 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html 4.01 strict标准下javascript获取页面高度和宽度尺寸的代码

阅读更多

注意:

doctype申明:html 4.01 strict

在搜索了很多网页之后,

经过在IE6firefox 3.0下的测试,

用js获取页面宽度高度的代码分别如下:

1、IE下:

document.body.scrollWidth;

document.body.scrollHeight;

2、Firefox下:

document.documentElement.scrollWidth;

document.documentElement.scrollHeight;

获得的尺寸是包括了页面当前显示的尺寸加上滚动条可滚动的宽度和高度。

----------------------------------------------------------------------------

其它页面尺寸相关的属性

网页可见区域宽: 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; 
当前鼠标位置的X坐标:document.body.scrollLeft+event.clientX; 网页横向滚动条的左位置 + 事件源的X坐标
当前鼠标位置的Y坐标:document.body.scrollTop+event.clientY;

分享到:
评论

相关推荐

    JS控制网页背景随窗口大小自动适应

    - **获取窗口尺寸**:根据不同的浏览器环境(IE与非IE)采用不同的方法获取窗口的高度和宽度。 - **更新背景图片尺寸**:根据窗口的实际尺寸调整背景图的宽高属性。 #### 详细实现步骤 1. **初始化事件监听**: -...

    图片动态切换技术

    首先,文档类型声明为HTML4.01 Strict,这确保了浏览器能够按照标准模式进行渲染。HTML和body元素设置了全屏显示的样式,并且定义了一个名为`imageFlow`的容器来承载所有与图片切换相关的元素。 2. **CSS样式设置*...

    js菜鸟笔记之图像幻灯动画_ekom.cn

    DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> 图像幻灯片动画 <!-- 其他元数据 --> <!-- 幻灯片容器 --> <!-- 其他元素 --> </html> ``` ##...

    10个技巧帮你搞定IE 6

    - 在HTML文档的开头添加DOCTYPE声明,可以确保浏览器以标准模式渲染页面。对于HTML4.01,推荐使用严格模式的DOCTYPE: ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ...

    css常见的bug(ie)

    在网页设计中,CSS(Cascading Style Sheets)起着至关重要的作用,它负责定义页面的布局和样式。然而,由于各个浏览器之间的实现差异,尤其是IE浏览器,开发者常常会遇到各种CSS兼容性问题。以下是一些针对IE浏览器...

    HTML&CSS

    - `width`、`height`:定义宽度和高度。 - **段落标签** `<p>`:定义一个段落。 - 属性: - `align`:设置文本对齐方式(左对齐、居中、右对齐)。 - **样式标签**:用于改变文本样式。 - `<strong>`:强调文本...

    Web前端编码规范

    DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">` 2. **标签大小写**: - 代码应遵循XHTML规范,所有标签都必须为小写。 3. **标签关闭**: - 所有标签均需正确关闭...

    IE6兼容笔记

    文档类型声明(Document Type Declaration, DOCTYPE)在前端开发中扮演着关键角色,它告诉浏览器该使用哪种标准来解析和渲染页面。对于IE6而言,正确的DOCTYPE声明至关重要,因为它能避免浏览器进入所谓的“怪异模式...

    ie6中页面的bug

    在Web开发过程中,尤其是针对IE6浏览器,开发者经常会遇到各种显示异常的问题,这些问题是由于IE6浏览器本身的渲染机制和对CSS标准支持不完全所导致的。以下是一些常见的IE6 bug及其解决方案: 1. **DOCTYPE声明**...

    浅谈浏览器兼容性模式[按F12便知]

    在怪异模式下,浏览器会使用非标准的解析规则,导致布局和样式表现与标准模式有很大差异,特别是在CSS的盒模型上,它通常采用IE的老式盒模型,其中元素宽度不包括边框和内边距。 DOCTYPE声明的写法直接影响到浏览器...

    ie6十大兼容性问题

    如果页面在Firefox和IE6下都能正常工作,那么通常也能在其他现代浏览器中正常显示。 #### 十、重构代码 有时候,对HTML结构进行微调或简化CSS规则可以有效减少兼容性问题。虽然这意味着可能无法完全遵循最严格的...

    jquery 实现两级导航菜单附效果图

    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 两级导航菜单的示例 ...

Global site tag (gtag.js) - Google Analytics