文档声明<!DOCTYPE html>导致document.body.offsetHeight取值为0

最新推荐文章于 2022-10-08 13:29:23 发布
最新推荐文章于 2022-10-08 13:29:23 发布
阅读量852 收藏
点赞数
分类专栏： js html 文章标签： html JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tjmljw/article/details/84533242
版权
js 同时被 2 个专栏收录
38 篇文章 0 订阅
订阅专栏
html
17 篇文章 0 订阅
订阅专栏

 

关于通过JS获取窗口高度和宽度的问题，如果使用了文档声明（<!DOCTYPE html>），则取得document.body.offsetHeight的值是0，删除文档声明后，则可以取得正确的值，可见文档声明对JS是有影响的，时间关系没有详细调查，下面的一篇文档可以作为参考。

 

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

lvw1105
关注
专栏目录
Vue源码分析——第三章
Lee的博客
09-10 616
Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...
offsetHeight在OnLoad中获取为0的现象
09-05
需要获取div的高度时，往往需要用到offsetHeight，有时会碰到offsetHeight获取到为0的现象，感兴趣的朋友可以参考下面的代码片段
document.body.offsetHeight等属性可能出现为0的时候
西毒
09-26 6598
使用document.documentElement.clientHeight可以得到值
document.body元素上的clientHeight, offsetHeight, scrollHeight
ForMyQianDuan的博客
04-27 3012
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; html, body { height: 100%
IE和FF下document.body对象的clientHeight，offsetHeight,scrollHeight的差别
xjinza的专栏
07-22 612
相关图片当页面实际内容高度大于浏览器可视区域高度时a. IE下    b. FF下当页面实际内容高度小于浏览器可视区域高度时a. IE下b. FF下由此有以下结论clientHeight     在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状
document.body.offsetWidth 网页可见区域高宽，offset、client、scroll使用方法详解，页面位置距离
ole_triangle_java的博客
01-17 6133
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全
文档类型声明对document.body.clientHeight的取值影响
mengyuying16的博客
08-30 712
有时候我们想要获取浏览器可视窗口（页面）的宽度和高度，会使用 document.body.clientWidth document.body.clinetHeight 但是，会发现在html文档头部的那个文档类型声明，会对document.body.clinetHeight发生区别。 1、不做任何文档类型声明时候，可以获取到页面的高度.（1366 662 是我电脑浏览器页面的宽度和高度）
JS、jQuery和Dojo对DOM的常用操作
Quincylk的专栏
01-02 513
在开发HTML5应用程序时，经常会创建、查找、修改DOM节点。熟练掌握DOM操作的各种常用方法十分必要。 一、DOM简介 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 1、HTML DOM （文档对象模型） 当网...
原生js的图片.文字.小框的跑马灯效果及弹幕效果
陈乾的博客
08-28 753
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果,于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增加了一个类似弹幕效果,下面直接上代码(原生js).
HTML元素拖拽功能的实现
老练
07-31 6819
在某些情况下我们需要在页面上拖拽块状元素。本文实现了元素的水平拖拽、垂直拖拽、任意方向拖拽。
Html+Css+JavaScript快速入门
Challenge_and_smiles的博客
07-03 1066
--------HTML基础-------- Hyper Text Markup Language：超文本标记语言. 什么是超文本：不仅仅是文本，还包括文本的样式(字体 大小 颜色等)，还包括多媒体(图片、音频、视频). 和xml的区别：XML标签可以任意定制，HTML标签固定就有那么多种. 学习HTML主要学习有哪些标签，标签有哪些属性，标签和标签间的嵌套关系. html常用标签： 文本标签： 1：<h1></h1> ...<h6></h6>
document.body.offsetWidth
笨鸟快飞的专栏
06-04 3569
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全
文书制作中要用到的javascript
zb219的专栏
10-09 794
文本框有个属性叫maxLength,可以限制文本框输入数据的多少,英文中文一样一个字算1. 我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。clientHeight
HTTP ClientHeight
11-03 324
<br /><br /> <br /> <br /> <br /><br />从图中，我们可以看到一个浏览器窗口，窗口被我故意拖小了，这样形成了滚动条，所以网页上端的内容就隐藏在了窗口上面，网页下端的内容就隐藏在了窗口下面。<br />clientHeight、offsetHeight 和 scrollHeight 大致可以这样解释（详细内容请仔细阅读后面的内容）：clientHeight 图中那块白的的高度。offsetHeight、scrollHeight 图中白的+上阴影部分+下阴影部分，也就是网页内
JS中使用offsetHeight 获取元素高度为0问题
m0_50981596的博客
10-08 3079
JS中使用offsetHeight 获取元素高度为0问题
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft
Ghosthuo的专栏
12-04 2448
html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">head>head>title> 代码实例：获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft title>meta http-equiv="content-type" content="text/html; charset=gb2312" />met
文档声明<!DOCTYPE html>对css的影响
tjmljw的专栏
03-05 335
用php做了一个网页，和Java的代码基本完全一致，可显示效果却差别很大。 具体表现是： Java版的页面中的body和div使用了css，在css中设置了height:100%，但页面高度并没有充满全屏。 php版的页面是从Java版本拷贝做成的，但是php版本的页面高度却是充满全屏的。   找到了问题的原因，没错，就是文档声明部分不同而已。 Java版本的是 &lt;!DOC...
文档声明（!DOCTYPE html）
Fantasc的博客
08-28 540
迭代：交换替代，版本的更新。 网页的版本：HTML4、XHTML2.0、HTML5… 文档声明（DOCTYPE）：用来告诉浏览器当前网页的版本。 html5的文档声明：< !DOCTYPE html >，文档声明要写在网页的最顶部， 因为不严格的区分大小写，所以也可以写成：<!doctype HTML> <!DOCTYPE html> <html> <head> <title>网页声明</title> &lt
前端面试题---html/css
weixin_44501366的博客
10-07 1277
!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值