DOCTYPE声明对JS获取窗口宽度和高度的影响

最新推荐文章于 2022-11-18 09:29:10 发布
最新推荐文章于 2022-11-18 09:29:10 发布
阅读量121 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/cxblogs/archive/2009/10/26/1589790.html
版权

在没有DOCTYPE声明的情况下:

document.body.clientWidth

document.body.clientHeight

为当前窗口的宽度/高度;

在DOCTYPE声明以后

document.body.clientWidth

document.body.clientHeight

为整个页面的宽度/高度;

document.documentElement.clientWidth

document.documentElement.clientHeight

为当前窗口的宽度/高度;

同样增加DOCTYPE声明后

document.body.scrollLeft

document.body.scrollTop

要改为

document.documentElement.scrollLeft

document.documentElement.scrollTop


注意保存时，文件的编码要看好，有时会出现脚本错误，是因为编码的格式问题，如GB2312

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

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到 document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用 document.documentElement来取代document.body,可以这样写
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。


---------------------------------------------------
JS获取浏览器窗口巨细 获取屏幕，浏览器，网页高度宽度

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

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

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


－－－－－－－－－－－－－－－－－－－

技术要点
本节源代码主要使用了Document东西关于窗口的一些属性，这些属性的主要效用和用法如下。

要得到窗口的尺寸，对付差别的浏览器，需要使用差别的属性和要领：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注重根元素的尺寸，而不是元素。

Window东西的innerWidth属性包括当前窗口的内部宽度。Window东西的innerHeight属性包括当前窗口的内部高度。

Document东西的body属性对应HTML文档的标签。Document东西的documentElement属性则体现HTML文档的根节点。

document.body.clientHeight体现HTML文档所在窗口确当前高度。document.body. clientWidth体现HTML文档所在窗口确当前宽度。

实现源代码

<!------------------------------文件 名：30.3.htm------------------------------><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> 请调解浏览器窗口</title><meta http-equiv="content-type" content="text/html; charset=gb2312"></head><body><h2 align="center">请调解浏览器窗口巨细</h2><hr><form action="#" method="get" name="form1" id="form1"><!--显示浏览器窗口的实际尺寸-->浏览器窗口的 实际高度: <input type="text" name="availHeight" size="4"><br>浏览器窗口 的实际宽度: <input type="text" name="availWidth" size="4"><br></form><script type="text/javascript"><!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口巨细 if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //结果输出至两个文本框 document.form1.availHeight.value= winHeight; document.form1.availWidth.value= winWidth; } findDimensions(); //挪用函数，获取数值 window.οnresize=findDimensions;//--></script></body></html>
源程序解读

（1）程序首先建立一个表单，包括两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口巨细的转变而转变。

（2）在随后的JavaScript源代码中，首先界说了两个变量winWidth和winHeight，用于留存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者留存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口巨细，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单位素，结果输出至两个文本框。

（6）在JavaScript源代码的最后，通过挪用findDimensions ( )函数，完成整个操纵。

转载于:https://www.cnblogs.com/cxblogs/archive/2009/10/26/1589790.html

weixin_30478619
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js获取网页高度(详细整理)
10-27
本篇文章将详细介绍如何使用JavaScript获取网页的可见区域高度、屏幕分辨率的高度、屏幕可用工作区高度以及浏览器窗口的高度。 首先，我们来看一下网页可见区域的高度和宽度。这部分是指用户当前可以看到的页面区域...
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
10-26
- `document.body.clientWidth` 和 `document.body.clientHeight` 分别返回不包括滚动条在内的网页可见区域的宽度和高度。 - `document.body.offsetWidth` 和 `document.body.offsetHeight` 则包括边线宽度，提供...
vue项目动态获取窗口以及元素宽高
文龙刚的博客
11-18 7477
vue项目动态获取窗口以及元素宽高
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
weixin_30706691的博客
11-01 424
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档bod...
js、jQuery获取页面中的各种宽度和高度
SweetoDream
08-25 7555
在JavaScript和jQuery中，对获取各种高度和宽度都有定义方法和属性，下面我们主要来说明一下获取窗口和文档的高度（宽度与高度相同）。jQuery中的方法 $(document).height();//整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直
JS-可视窗口的宽高度
DcTbnk的博客
04-02 525
情况1:包括滚动条的宽度高度 包含有滚动条宽度高度 滚动条的大小,有的时候是16,有的时候是17 结果只是数值 window.innerHeight 高度 window.innerWidth 宽度 情况2:不包括滚动条宽度高度 document.documentElement.clientHeight 高度 document.documentElement.clientWid...
CSS专题（三）：页面高度发微
dazhatan9812的博客
08-14 207
一 背景 　　本文不讨论普通元素的大小和位置，仅仅讨论页面的大小和位置，而且为了简化问题，本文只讨论高度与顶部距离。笔者发现，页面的宽度与高度的表现有很多不同，细心的朋友会发现，故页面宽度另起文讨论，文章已经写好，见页面宽度发微。 　　这里说的页面高度，是指浏览器页面的高度。有以下四种元素能够表现页面的高度：window,html,document,body。这些元素的高宽常常不被人...
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
01-19
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
JavaScript与JQUERY获取元素的宽、高和位置
10-20
- 不推荐使用`$("html").height()`和`$("body").height()`来获取高度，因为它们可能受到边框和浏览器兼容性的影响。 - 没有`<!DOCTYPE>`声明可能导致`$(window).height()`返回不准确的结果。 这些方法提供了全面...
js获取当前屏幕实时逻辑像素
09-20
2. `window.innerWidth`和`window.innerHeight`：这两个属性返回浏览器窗口的可视区域的宽度和高度，即用户可以看到的网页部分，不包括滚动条。 3. `document.documentElement.clientWidth`和`document....
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
10-26
本篇文章主要介绍了JS获取屏幕,浏览器窗口大小,网页高度宽度的实现代码。需要的朋友可以过来参考下，希望对大家有所帮助
jquery获取浏览器高度、宽度和滚动条高度
weixin_30814223的博客
10-11 140
我们做前端的，经常需要获取浏览器的宽度和高度，还有滚动条的高度，今天整理出来，以后拿来直接用。 Jquery代码： 1 alert($(window).height()); //浏览器时下窗口可视区域高度 2 alert($(document).height()); //浏览器时下窗口文档的高度 3 alert($(document.body).h...
js 获取屏幕各种宽高的方法
weixin_34289454的博客
07-31 134
2019独角兽企业重金招聘Python工程师标准>>> ...
js获取窗口宽度高度
yushuir的专栏
03-22 102
var    s  =  "网页可见区域宽："+  document.body.clientWidth;  s  +=  "\r\n网页可见区域高："+  document.documentElement.clientHeight;  s  +=  "\r\n网页正文全文宽："+  document.body.scrollWidth;  s  +=  "\r\n网页正文全文高："+  docum...
原生js如何获取某一元素的高度
热门推荐
fydxx的博客
11-27 3万+
一般有三种方法: 1.document.getElementById("id").style.height,这种方法的前提是必须之前已经显示的在css中声明过height,才能取得正确的值 2.document.getElementById("id").clientHeight 3.document.getElementById("id").offsetHeight
js 获得窗口的高度与宽度
丶扁扁的糖是扁的 的博客
11-08 1125
//IE 8 及更早 IE 版本不支持innerWidth和innerHeight这两个属性 function getViewportOffset() { //各大主流浏览器 if (window.innerWidth !== undefined) { return { w: window.innerWidth, h: window.innerHeight } } else { // ie8及其.
窗口宽度描述
weixin_42112323的博客
05-15 977
scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度） clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 scrollHeight: 获取对象的滚动高度。 offsetHeight:获取对象相对于版面或由父坐标 scro...
获取窗口高度和宽度
weixin_30455023的博客
02-18 166
我们首先把window.innerWidth和window.innerHeight的值分别付给了pageWidth和pageHeight。 - 取得窗口大小的代码： 复制代码 代码如下: var pageWidth = window.innerWidth, var pageHeight = window.innerHeight; if(typeof pageWidth != "numb...
js打开一个窗口，并且可以调整窗口的位置以及大小，并且在窗口里面打印出来，窗口坐标，以及文档和窗口的宽度和高度
最新发布
05-12
可以使用以下代码来实现打开一个窗口，并且可以调整窗口的位置以及大小，并且在窗口里面打印出来，窗口坐标，以及文档和窗口的宽度和高度： ```html <!DOCTYPE html> <html> <head> <title>Resizable Window</title> <style> body { margin: 0; padding: 0; overflow: hidden; } </style> <script> function openWindow() { var width = 500; var height = 400; var left = (screen.width - width) / 2; var top = (screen.height - height) / 2; var features = 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top + ',resizable=yes'; var windowObject = window.open('', '', features); windowObject.document.write('<p id="windowSize"></p>'); windowObject.document.write('<p id="documentSize"></p>'); windowObject.document.write('<script>function updateSize() { document.getElementById("windowSize").innerHTML = "Window Size: " + window.innerWidth + " x " + window.innerHeight + " (left: " + window.screenLeft + ", top: " + window.screenTop + ")"; document.getElementById("documentSize").innerHTML = "Document Size: " + document.documentElement.clientWidth + " x " + document.documentElement.clientHeight; }</script>'); windowObject.document.write('<style>body { background-color: #f2f2f2; }</style>'); windowObject.document.write('<body onload="updateSize()" onresize="updateSize()"></body>'); } </script> </head> <body> <button onclick="openWindow()">Open Resizable Window</button> </body> </html> ``` 这里我们定义了一个 `openWindow()` 函数，当点击按钮时会调用该函数来打开一个窗口。在 `openWindow()` 函数内，我们首先定义了窗口的大小和位置，然后使用 `window.open()` 方法打开一个新窗口，并且指定了窗口的大小和位置以及可调整大小的属性。接下来我们在新窗口中使用 `document.write()` 方法来写入一些 HTML 代码，包括一个用于显示窗口大小和位置的 `<p>` 元素以及一个用于显示文档和窗口的宽度和高度的 `<p>` 元素。我们还在新窗口中写入了一些 JavaScript 代码用于更新窗口大小和位置以及文档和窗口的宽度和高度。最后我们还写入了一些 CSS 代码来设置新窗口的背景颜色。 在新窗口中，我们使用 `body` 元素的 `onload` 和 `onresize` 事件来更新窗口大小和位置以及文档和窗口的宽度和高度。在 `updateSize()` 函数中，我们使用 `window.innerWidth` 和 `window.innerHeight` 属性来获取窗口的宽度和高度，使用 `window.screenLeft` 和 `window.screenTop` 属性来获取窗口的位置，使用 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取文档和窗口的宽度和高度，并且将这些值设置为相应的 `<p>` 元素的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值