web标准与document.body.clientHeight

最新推荐文章于 2018-07-25 21:25:43 发布
最新推荐文章于 2018-07-25 21:25:43 发布 · 111 阅读 · 0
文章标签：

#Web #XHTML #HTML

本文探讨了在不同文档类型声明（DOCTYPE）下，如何正确获取网页文档的高度。在Quirks模式下，可以通过document.body.clientHeight获取高度；而在标准模式下，则需要使用document.documentElement.clientHeight。文章还提供了调整DOCTYPE的方法。

网页加了这么一行
<!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">

 
iteye_14206
关注
由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>` 元素。这两个元素在不同情况下存储着不同的...
document.body.clientHeight
weixin_33835690的博客
03-03 249
document.body.clientWidth ==&gt; BODY对象宽度（也是可见区） document.body.clientHeight ==&gt; BODY对象高度（也是可见区） document.documentElement.clientWidth ==&gt; 可见区域宽度 document.documentElement.clientHeight ==&gt; 可见...
文档类型声明对document.body.clientHeight的取值影响
Y0_Daisy的博客
07-25 402
  转自：https://blog.csdn.net/mengyuying16/article/details/77717186?locationNum=6&amp;fps=1
问题:w3c中clientheight的用法?
kbx8916的博客
08-11 709
问题:w3c中clientheight的用法?
我用到的clientHeight等属性
xiongzhengxiang的专栏
05-09 1454
弹出浮动层，让起居于浏览器底部是需求中，我用到的各种height有： 1  浏览器可见区域高度：document.documentElement.clientHeight;    ***document.body.clientHeight*** 是整个页面内容的高度，而非浏览器可见区域的高度 2 滚动条已滚动的高度：document.documentElement.scrollTop;
clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth
pgLi
06-06 888
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：do...
tabs = browser.list_tab() if not tabs: print("未检测到已打开的标签页") return # 选择第一个已打开的标签页 tab = tabs[0] tab.start() tab.Page.navigate(url=url) tab.wait(1) # 等待页面加载 # 启用必要域 tab.Page.enable() tab.Runtime.enable() # 获取完整页面高度 js_get_height = """ return Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight ); """ 如何执行这段js
最新发布
10-10
document.body.clientHeight, document.documentElement.clientHeight ) ``` 具体实现步骤： 步骤1：导入pychrome库，并连接到运行中的Chrome实例（调试端口通常为9222） 步骤2：列出所有标签页，选择目标...
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.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 548
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
HTML中常见的各种位置距离以及dom中的坐标讨论
weixin_30245867的博客
05-22 997
最近在学习JavaScript，特意买了一本犀牛角书来看看，尼玛一千多页，看的我头昏脑涨，翻到DOM这章节，突然记起平常在使用DOM时，碰到了好多的这个dom里面的各种宽度，高度，特意在此写一写，写的不好或者写错了，欢迎各位指正。好了废话不多说，开始进入主题。 这篇文章主要讨论两点： 一、DOM中各种宽度、高度 二、DOM中的坐标系 下面我们看看DOM中都有一些什么宽度、高度。 常见的 ...
三张图看懂 clientheight、offsetheight、scrollheight
aoyao9093的博客
07-17 1025
clientheight 　　clientheigh： 内容的可视区域，不包含border。 　　clientheight=padding + height - 横向滚动轴高度。 The Element.clientHeight read-only property is zero for elements withno CSS or inline layout boxes,...
关于clientHeight，offsetHeight等小笔记
免惘
05-09 4711
遇到一个有个问题：关于clientHeight，offsetHeight，scrollHeight，以及height，contentHeight（width也一样）的区别。 这里有参考http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-res
offsetHeight, clientHeight与scrollHeight的区别
热门推荐
清箫的专栏
03-05 3万+
在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的，没有测试quirk模式。 clientHeight 大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式
[JS]document.body.clientHeight的取值
weixin_30550271的博客
01-05 254
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可是在XHTML中, 如果body 体中只有一行, 则documen...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值