doctype后如何获得body.clientHeight

最新推荐文章于 2020-09-14 18:00:16 发布
最新推荐文章于 2020-09-14 18:00:16 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： JAVASCRIPT&CSS 文章标签： html ie 脚本

今天在用一个随滚动条移动的效果代码时，发现有的页面，不动，而JS代码是一样的 。

上网一搜索才知道，原来是loose.dtd搞的鬼，查到的说明如下：

在用DW mx 2004 新建网页文件时会自动加入：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
在ie6中很多js脚本执行就会出现问题，一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。

因为在加了doctype后，在ie6中这些document.body的属性已经重新分配给了document.documentElement。

比如：原来document.body.clientHeight，就要改成document.documentElement.scrollTop

 

而我的JS代码是好多页面公用的，有的页面有loose.dtd，有的没有。为了自适应，我就改了下代码：

((document.documentElement.clientHeight==0)?document.body.clientHeight:document.documentElement.clientHeight)

用这样的代码就能自适应了。



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1524916 

david286
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
doctype后如何获得body.clientHeight的方法
10-30
doctype后如何获得body.clientHeight的方法
关于body.clientHeight，body.clientWidht获取的不是可视高度的问题
qq_42814833的博客
08-05 674
我发现网上一些教程可能都是10几年前的老古董了，经过不知道多少号复制翻新，导致有时候你很难去发现问题，甚至是大部分的教程都是这么写的，害人不浅。问题的经过是这样的，我需要获取页面的可视高度。网上搜一搜，全部都说使用body.clientHeight来获取，结果嘛获取的是body的总高度。总结一下，在标准模式下使用根节点来获取可视高度才是正确的。要使用的是根节点的clientHeight，也就是。所谓标准模式的判定是你在HTML文件上方声明了。经过我一番查找，发现问题所在。下才能返回可视高度，在。......
document.body元素上的clientHeight, offsetHeight, scrollHeight
ForMyQianDuan的博客
04-27 2944
&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%
document.body.clientHeight返回值为0的解决方案
热门推荐
web前端菜鸟工程师
01-12 1万+
最近在做一个div内容高度在不同浏览器下的高度自适应，发现document.body.clientHeight的返回值为0. 网上查了一下， 貌似有很多个解决方案。  1. 使用document.documentElement.clientHeight获取。  当使用html5的时候，就会有documentElement在document下。  如上图所示 ， 左边为c
用document.documentElement取代document.body的原因分析
01-19
上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。 那我们怎么办呢？难道加上了文档...
由document.body和document.documentElement想到的
09-06
1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度，不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...
浅谈DOCTYPE对$(window).height()取值的影响
09-01
这段代码首先检查文档高度是否大于窗口高度，如果是，则使用`document.body.clientHeight`获取窗口高度，因为在这种模式下，它能正确反映可视区域的高度。否则，直接使用$(window).height()，这适用于内容未超过一...
documen.body.clientHeight的取值问题。
weixin_34220179的博客
12-24 324
有的时候要去页面的顶部到底部的高度时就要用到document.body.clientHeight来获得。 在HTML中无论body的高度是多少只要用documen.body.clientHeight就能获得到底有多高，例如：1074*768分辨率取得的值就是768.即使body中只有一句“hello world” 也能获得到底的高度。 但是在XHTML中如果body只有一行的话，那么使用d...
document.body.clientHeight
weixin_30278311的博客
03-03 81
document.body.clientWidth ==> BODY对象宽度（也是可见区） document.body.clientHeight ==> BODY对象高度（也是可见区） document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见...
document.body.clientHeight高度问题
hello world
09-14 1604
移动端滚屏一次滚动一屏，document.body.clientHeight本来是为了获取屏幕高度，可项目发现获取到的值非常大 经排查，应先设置body高度100%，或者使用document.documentElement.clientHeight
document.body.clientHeight 和 document.documentElement.clientHeight的区别
生存不忘生活
12-16 940
1.在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代doc
Automation 服务器不能创建对象
david286的专栏
10-19 558
regsvr32 scrrun.dll 
让body的clientHeight与html的clientHeight相等的方法
dayanwu2842的博客
05-03 102
body元素是自适应高度的块级元素，当页面内容比较少时，它的高度会小于默认浏览器的可是区域高度；html元素的高度是默认等于浏览器视窗的高度的 从文档结构上来说 body是html的子元素，按道理设置body{ height:100%;},可以让它和html元素高度相等，实际发现没没效果。需要设置 html,body{height:100%}才能让两者的高度相等 测试代码如下： ...
clientWidth、clientHeight 在各大浏览器中的获取方法
前端小记
08-21 3478
IE中：  document.body.clientWidth ==> BODY对象宽度  document.body.clientHeight ==> BODY对象高度  document.documentElement.clientWidth ==> 可见区域宽度  document.documentElement.clientHeight ==> 可见区域高度  FireFox中：
关于document.body.clientHeight的返回值为0的问题
Panda0218的博客
01-14 3570
有时候我们需要去获取body的高度，但是通过document.body.clientHeight却得到值是0。那么如何解决这个问题呢？ 我们只需要将html和body的css样式中添加属性height:100%;即可。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;titl...
js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
javaloveiphone的专栏
03-22 9596
pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.注： 1、如果元素位于body中，e.clientX + document.body.scrollLeft - document.body.clientLeft = e.p
HTTP ClientHeight
11-03 308
<br /><br /> <br /> <br /> <br /><br />从图中，我们可以看到一个浏览器窗口，窗口被我故意拖小了，这样形成了滚动条，所以网页上端的内容就隐藏在了窗口上面，网页下端的内容就隐藏在了窗口下面。<br />clientHeight、offsetHeight 和 scrollHeight 大致可以这样解释（详细内容请仔细阅读后面的内容）：clientHeight 图中那块白的的高度。offsetHeight、scrollHeight 图中白的+上阴影部分+下阴影部分，也就是网页内
请解释一下这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>TOP 5000 电影数据分析</title> <style> ::-webkit-scrollbar { display: none; } html, body { font-family: 'Ubuntu Condensed'; height: 100%; margin: 0; color: rgba(0, 0, 0, 0.85); } </style> </head> <body> <div id="mountNode"></div> </div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="static/g2.min.js"></script> <script src="static/data-set.min.js"></script> <script src="static/jquery-3.2.1.min.js"></script> <script> function generateChart(id, type, xkey, xlabel, ykey, ylabel) { var chart = new G2.Chart({ container: id, forceFit: true, height: 500, padding: [40, 80, 80, 80], }); chart.scale(ykey, { alias: ylabel, min: 0, // max: 3000, tickCount: 4 }); chart.axis(xkey, { label: { textStyle: { fill: '#aaaaaa' } }, tickLine: { alignWithLabel: false, length: 0 } }); chart.axis(ykey, { label: { textStyle: { fill: '#aaaaaa' } }, title: { offset: 50 } }); chart.legend({ position: 'top-center' }); chart.interval().position(`${xkey}*${ykey}`).label(ykey).color('#ffb877').opacity(1).adjust([{ type, marginRatio: 1 / 32 }]); chart.render(); return chart; } </script> <script> let chart = generateChart('mountNode', 'dodge', 'genre', 'genres', 'count', '# movies'); window.onload = () => { $.getJSON("/static/genres.json", d => { chart.changeData(d) }) } </script> </body> </html>
最新发布
06-02
7. `<body>` 标签包含了页面的主要内容。 8. `<div id="mountNode"></div>` 是一个空的 div 元素，用于挂载柱状图。 9. `<script>` 标签包含了页面的 JavaScript 代码。 10. `generateChart()` 函数用于生成柱状...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值