`
jjklmm
  • 浏览: 55008 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DOCTYPE对javascript的影响

阅读更多

不同的<!DOCTYPE>定义会影响到javascript的正常运行以及运行结果。

今天我在javascript中想取得一个当前网页可见区域的高度时发生一个问题:

不管我怎么缩放当前的窗口,取得的可见区域我值都是一样的,我在IE、Firefox上测试结果都一样。

我想起以前发现定义<!DOCTYPE>和不定义<!DOCTYPE>会影响到Javascript的运行,我就到百度搜索了一下,才发现我的猜测是正确的,果然在这两种情况下,想得到可见区域的方法是不一样的:

在来自IE6以后如果在页面顶上加了doctype后,一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。
因为在加了doctype后,在ie6中这些document.body的属性已经重新分配给了document.documentElement

比如:原来document.body.clientHeight,就要改成document.documentElement.clientHeight


为了自适应,可以改了下代码:

var height = document.documentElement.clientHeight==0?document.body.clientHeight:document.documentElement.clientHeight

分享到:
评论

相关推荐

    !DOCTYPE声明对JavaScript的影响分析

    当然对JS的取值也会有影响。 DOCTYPE声明如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; DOCTYPE声明包括:过渡型...

    【JavaScript源代码】原生JavaScript实现简单五子棋游戏.docx

    原生JavaScript实现简单五子棋游戏  本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 HTML页面 注释都很明确了,大家好好学习。 &lt;!DOCTYPE ...

    【JavaScript源代码】JavaScript代码实现简单计算器.docx

     本文实例为大家分享了JavaScript代码实现简单计算器的具体代码,供大家参考,具体内容如下 (1)利用css样式、javascript语言和html语言实现计算器的算法 (2)对计算器的页面进行规划以及对界面进行颜色的填涂 ...

    javascript小游戏代码

    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;!-- saved from url=(0025)http://js.wanxu.com/myjs/ --&gt; &lt;HTML&gt;&lt;HEAD&gt;网页特效集锦(js.wanxu.com ) ; charset=gb2312"&gt; content="java, ...

    javascript代码,通俗易懂

    javascript以下是javascript中的数组定义形式: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; ; charset=GBK"&gt; &lt;title&gt;Untitled Document ...

    html doctype 作用介绍

    不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关键的,尤其是在 IE 系列浏览器中,由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。 两种渲染模式: BackCompat:...

    【JavaScript源代码】JavaScript实现筛选数组.docx

    JavaScript实现筛选数组  本文实例为大家分享了JavaScript实现筛选数组的具体代码,供大家参考,具体内容如下 今天,运用JavaScript的相关知识,制作了筛选数组的案例。希望我们互相学习,共同进步! 最终效果图...

    javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

    本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果。分享给大家供大家参考。具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5。个人还是比较推荐chrome,这个效果在...

    【JavaScript源代码】javascript实现编写网页版计算器.docx

    javascript实现编写网页版计算器  本篇主要记录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下 话不多说,代码如下: 首先是html的代码: &lt;!DOCTYPE ...

    【JavaScript源代码】javascript实现前端分页功能.docx

    javascript实现前端分页功能  前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下 先上一波效果图展示: 直接上代码:这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在...

    【JavaScript源代码】原生JavaScript实现购物车.docx

    原生JavaScript实现购物车  本文实例为大家分享了JavaScript实现购物车的具体代码,供大家参考,具体内容如下 效果: 代码: &lt;!DOCTYPE html&gt;  &lt;html&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;...

    【JavaScript源代码】javascript实现简单留言板案例.docx

    然后当用户评论时,空评论不能评论,发布的评论将会最新显示,把旧的评论抵下去,然后博主可以对评论进行删除 代码如下: &lt;!DOCTYPE html&gt;  &lt;html lang="en"&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt; &lt;title&gt;...

    javascript设置页面背景色及背景图片的方法

    本文实例讲述了javascript设置页面背景色及背景图片的方法。分享给大家供大家参考,具体如下: &lt;!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New ...

    【JavaScript源代码】JavaScript快速实现日历效果.docx

    JavaScript快速实现日历效果  本文实例为大家分享了JavaScript快速实现日历效果的具体代码,供大家参考,具体内容如下 效果图 代码 &lt;!DOCTYPE html&gt;  &lt;html lang="en"&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...

    【JavaScript源代码】JavaScript实现滚动加载更多.docx

    JavaScript实现滚动加载更多  本文实例为大家分享了JavaScript实现滚动加载更多的具体代码,供大家参考,具体内容如下  vscode  index: &lt;!DOCTYPE html&gt;  &lt;html lang="en"&gt;  &lt;head&gt;   ...

    【JavaScript源代码】JavaScript实现网页版贪吃蛇游戏.docx

    DOCTYPE html&gt;  &lt;html&gt;  &lt;head&gt;&lt;title&gt;贪吃蛇&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt; &lt;script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"&gt;...

    【JavaScript源代码】javascript canvas实现雨滴效果.docx

    javascript canvas实现雨滴效果  本文实例为大家分享了javascript canvas实现雨滴效果的具体代码,供大家参考,具体内容如下 先看效果 看起来很炫酷,其实就是实现了雨滴的掉落还有最后的圆 还是看源码 &lt;!...

    【JavaScript源代码】Javascript实现简易导航栏.docx

    Javascript实现简易导航栏  本文实例为大家分享了Javascript实现简易导航栏的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt;  &lt;html lang="en"&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt; , initial-scale=...

    【JavaScript源代码】javascript实现下拉菜单效果.docx

    javascript实现下拉菜单效果  用Javascript实现下拉菜单,供大家参考,具体内容如下 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 下拉菜单,或者侧拉菜单在实际开发当中非常的实用 ...

Global site tag (gtag.js) - Google Analytics