web标准与document.body.clientHeight

最新推荐文章于 2025-08-05 17:49:47 发布
最新推荐文章于 2025-08-05 17:49:47 发布
阅读量2.2k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： web xhtml html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fableking/article/details/1632697
本文介绍了在不同文档类型定义（DTD）下如何正确获取网页的高度。在Quirks模式下可以直接使用document.body.clientHeight，而在标准模式下则需要使用document.documentElement.clientHeight。此外还提到了通过调整DTD声明来解决该问题的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

网页加了这么一行
<!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">
document.body.clientHeight就不可用,解决方法如下:

在Quirks渲染模式下<body>作为文档的根，所以可以用document.body.clientHeight得到文档的高度。而在Standard渲染模式下，<html>作为文档的根，需要使用document.documentElement.clientHeight才可以得到。此时document.body的高度和宽度都为0 

或者将
<!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">
改为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

 
文档类型声明对document.body.clientHeight的取值影响
mengyuying16的博客
08-30 764
有时候我们想要获取浏览器可视窗口（页面）的宽度和高度，会使用 document.body.clientWidth document.body.clinetHeight 但是，会发现在html文档头部的那个文档类型声明，会对document.body.clinetHeight发生区别。 1、不做任何文档类型声明时候，可以获取到页面的高度.（1366 662 是我电脑浏览器页面的宽度和高度）
IE中Option的disabled无效解决方法
天涯 书塾
01-31 4666
今天在做东西的时候，想到给option项添加disabled的禁用功能，没想到竟然有属性却无效的。。。不过firefox里倒是有效，无奈，IE虽然差劲，但PC毕竟还是微软的天下。。。。还是要适应IE阿。。。网罗了一下资料，发现一个不错的脚本，那来用了下，感觉不错，基本可以跟firefox里的效果媲美了，而且代码也不多代码如下：（为了注重版权问题，这里就没把原注释删除）/**//**
web 开发笔记“height clientHeight scrollHeight offsetHeight”
yefengyaogang的专栏
12-31 836
本人学习东西总是喜欢从概念入手，所以遇到height clientHeight scrollHeight offsetHeight 时， 我首先查询了一下他们的中文翻译。 height:高度，html元素高度属性，这个值你设置的是多少就是多少，没什么解释的 clientHeight:都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度， 一般是最后一
css clientheight、offsetheight、scrollheight详解
热门推荐
wangjun5159的专栏
02-07 1万+
介绍网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。为了加深理解，看后，最好做下后边的实验。 clientheightclientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。
document.documentElement.clientHeight和document.body.clientHeight区别
weixin_33834679的博客
04-12 3065
首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点。 所有的HTML元素都是元素节点。 所有 HTML 属性都是属性节点。 文本插入到 HTML 元素是文本节点。are text nodes。 注释是注释节点。 Document 对象 当浏览器载入HT...
document.body.clientHeight 和 document.documentElement.clientHeight的区别
生存不忘生活
12-16 990
1.在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代doc
document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
u011927449的博客
11-09 3405
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题。这两个应该不是一个东西。 页...
由document.body和document.documentElement想到的
09-06
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
doctype后如何获得body.clientHeight的方法
10-30
- **`document.documentElement` 与 `document.body` 的区别**：在标准模式下，`document.documentElement` 指的是 `<html>` 元素，而 `document.body` 指的是 `<body>` 元素。这两个元素在不同情况下存储着不同的...
function calendar()//主调函数 { var e = window.event.srcElement; writeIframe ()； var o = WebCalendar.calendar.style; WebCalendar.eventSrc = e; if (arquments.length == 0) WebCalendar.objExport = e; else WebCalendar.objExport =eval(arquments[0]); WebCalendar.iframe.tableWeek.style.cursor = WebCalendar.draq ? "move" : "default"; var t = e.offsetTop, h = e.clientHeight, l = e.offsetLeft, p = e.type; while (e = e.offsetParent){t += e.offsetTop; l += e.offsetLeft;} o.display = ""; WebCalendar.iframe.document.body. focus () ; var cw = WebCalendar.calendar.clientWidth, ch = WebCalendar.calendar.clientHeight; var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop; if (document.body.clientHeight + dt - t - h >= ch) o.top = (p=="image")? t + h : t + h + 6; else o.top = (t - dt < ch) ? ((p=="image")? t + h :t + h + 6) :t - ch; if (dw + dl - l >= cw) o.left = l; else o.left = (dw >= cw) ? dw - cw + dl : dl; if (!WebCalendar.timeShow) WebCalendar.dateReg = /^(\d{1, 4}) (-1\/) (\d{1, 2}) \2(\d{1, 2})$/; else WebCalendar.dateReg = /^(\d{1, 4}) (-1\/) (\d}1, 2})\2(\d{1, 2}) (\d{1, 2}): (\d{1, 2}): (\d{1, 2})$/; try { if (WebCalendar.objExport.value.trim() != ""){ WebCalendar.dateStyle = WebCalendar.objExport.value.trim() .match (WebCalendar.dateReg) ; if (WebCalendar.dateStyle == null) {WebCalendar.thisYear = new Date().getFullYear () ; WebCalendar.thisMonth = new Date().getMonth()+ 1; WebCalendar.thisDay = new Date().getDate(); alert("无效的日期格式!”)； writeCalendar(); return false;} else{ WebCalendar. thisYear = parseInt (WebCalendar.dateStyle[1], 10); WebCalendar.thisMonth = parseInt (WebCalendar .dateStyle[3], 10); WebCalendar.thisDay = parseInt (WebCalendar.dateStyle[4], 10); WebCalendar. inputDate=parseInt (WebCalendar.thisMonth, 10) +"/"+ parseInt (WebCalendar.thisDay, 10) +”/"+ parseInt(WebCalendar.thisYear, 10) ; writeCalendar() ; }}else writeCalendar () ; } catch(e) (writeCalendar () ;} } 给上述代码添加注释的注释，并解释相关方法
03-13
if (document.body.clientHeight + dt - t - h >= ch) o.top = (p=="image")? t + h : t + h + 6; // 下方有足够空间时显示在元素下方 else o.top = (t - dt ) ? ((p=="image")? t + h :t + h + 6) :t - ch; // ...
document.compatMode介绍
09-06
在Quirks Mode下，IE和其他一些早期浏览器的行为可能会导致元素的尺寸、定位和布局与标准模式有所不同，特别是在处理盒模型时。 `document.compatMode` 就是用来检测当前文档是在使用哪种渲染模式。如果值为 "CSS1...
关于window.pageYOffset和document.documentElement.scrollTop
09-05
在Web开发中，特别是在处理页面滚动事件时，`window.pageYOffset` 和 `document.documentElement.scrollTop` 是两个非常重要的属性。它们都是用来获取用户在浏览器窗口中滚动的位置，即浏览器视口距离文档顶部的距离...
多种网页弹出窗口代码
天涯 书塾
01-28 957
 1.弹启一个全屏窗口 ＜html＞ ＜body onload="window.open(" http://www.e3i5.com","example01","fullscreen");"＞ ＜b＞www.e3i5.com＜/b＞ ＜/body＞ ＜/html＞    2.弹启一个被f11化后的窗口 ＜html＞ ＜body onload="window.open(" http://www.
11. HTML 中 DOCTYPE 的作用
weixin_64684095的博客
07-22 558
H5 的声明HTML5 的 DOCTYPE 声明HTML5 中的声明用于告诉浏览器当前文档使用的是 HTML5 的文档类型。它必须是文档中的第一行内容（在任何 HTML 标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE 的作用触发标准模式DOCTYPE声明的主要作用是让浏览器以标准模式（Standards Mode）来解析和渲染页面，而不是以兼容模式（Quirks Mode）。兼容性：在没有DOCTYPE声明的情况下，浏览器可能会进入兼容模式，这会导致页面的布局和样式表现不一致。
【前端:Html】--1.2.基础语法
我是个好人呀，O(∩_∩)O
08-03 1038
本文摘要：HTML基础教程主要介绍了CSS样式、图像处理、表格布局和JavaScript交互等内容。在CSS部分，详述了颜色定义方法（包括140种命名颜色和RGB/HEX/HSL格式）、三种样式表应用方式（内联/内部/外部）以及类(class)和ID的使用场景。图像章节讲解了<img>标签的基本属性、图像映射技术以及响应式设计。表格部分涵盖了边框样式、单元格间距和内容对齐等格式化技巧。此外，还介绍了块级/内联元素区别、列表类型（有序/无序/自定义）以及iframe内联框架的应用。最后阐述了Jav
备忘录记事本 任务清单 html
qq_42949957的博客
08-05 148
任务记录清单
ESP-idf框架下的HTTP服务器\HTML 485温湿度采集并长传
最新发布
lhz7788的博客
08-05 155
本项目采用485采集温湿度以及电压电流等,485模块分别为下图,串口转485模块采用自动收发模块,ESP32工作在AP热点模式,通过手机连接esp32的热点来和esp进行数据通讯,使用esp32作为HTTP服务器。项目的最终HTML页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值