`
jjklmm
  • 浏览: 57554 次
  • 性别: 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的影响分析

    DOCTYPE声明影响页面元素的呈现方式,进而影响JavaScript对这些元素属性值的获取。 JavaScript通过各种对象模型与HTML元素交互,如 DOM(文档对象模型)和BOM(浏览器对象模型)。DOM提供了文档的结构化表示,允许...

    html标题_DOCTYPE的含义

    在XHTML 1.0中,也有同样的三种文档类型,但是它们是基于XML的,因此对语法的要求更加严格: 1. **XHTML Strict DTD**:同样要求干净的标记,避免表现层的混乱,鼓励使用CSS。例如: ```html &lt;!DOCTYPE ...

    DOCTYPE html PUBLIC.doc

    以下是对这些知识点的详细说明: 1. **DOCTYPE声明**:`&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;` 这行代码定义了文档类型为...

    网页 DOCTYPE html标签的作用1

    在这种模式下,一些CSS样式可能不会按预期工作,页面布局可能会混乱,JavaScript的行为也可能与标准模式下不同。因此,为了确保跨浏览器的一致性和兼容性,以及良好的页面渲染效果,开发者应该始终在HTML文档的开头...

    浅谈DOCTYPE对$(window).height()取值的影响

    DOCTYPE的使用会影响浏览器的渲染模式,进而可能对JavaScript中的某些函数,如$(window).height(),产生影响。$(window).height()是jQuery中获取浏览器窗口可视区域高度的方法,这对于实现页面元素的动态布局,特别...

    javascript - javascript tutorial

    - JavaScript对空格和换行符相对宽容,可以在代码中自由地使用它们来提高可读性。 - **分号是可选的** - 在语句之间通常使用分号,但在某些情况下可以省略。 - **大小写敏感性** - JavaScript是大小写敏感的...

    javascript

    JavaScript是一种广泛用于网页开发的脚本语言,它是实现Web前端交互功能的核心技术之一。在给定的文件内容中,我们可以提取到关于JavaScript的多个知识点: 1. JavaScript的变量类型:JavaScript中主要有几种基本的...

    JavaScript实战手册PDF【原名:javascript the missing manual】

    《JavaScript实战手册》由David Sawyer McFarland撰写,是一本深入浅出地讲解JavaScript编程语言的书籍,旨在填补初学者与专业开发者之间的知识空白。本书不仅涵盖了JavaScript的基础语法,还涉及了如何在网页中嵌入...

    html教案、javascript

    DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`和`&lt;body&gt;`。`&lt;head&gt;`用来包含元信息,如页面标题,而`&lt;body&gt;`则容纳实际的网页内容。 2. 标签语法:HTML通过各种标签来表示不同的元素,如文本内容`&lt;p&gt;`、标题`&lt;h1&gt;`至`&lt;h6&gt;`、...

    网页源代码,javascript

    根据提供的文件信息,我们可以从网页源代码中提取到与网页结构、样式以及JavaScript脚本相关的知识点。接下来将详细解析这些知识点。...通过对这些知识点的学习和理解,可以更好地掌握前端开发的基础知识和技术要点。

    JavaScript 小游戏代码汇总

    JavaScript 小游戏代码汇总 JavaScript 是一种广泛使用的脚本语言,常用于开发 web 应用程序尤其是游戏开发。以下是 JavaScript 小游戏代码汇总的知识点: 1. HTML 基础:代码开头使用的 `&lt;!DOCTYPE html&gt;` 声明...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术(第2版)》。尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript...

    Javascript基础网页中调用JS代码的几种方法

    ### JavaScript基础网页中调用JS代码的几种方法 在网页开发过程中,JavaScript作为一种重要的客户端脚本语言,被广泛应用于交互式网页设计中。本文将详细介绍几种在HTML文档中调用JavaScript代码的方法,帮助开发者...

    基于javascript实现动态时钟效果

    以上内容,不仅为对JavaScript感兴趣的开发者提供了参考,也为网页设计者展示了如何在网页中加入实用的动态效果,提供了很好的实践案例。对于学习JavaScript和网页设计的朋友们来说,这种动态时钟是一个基础且实用的...

    Javascript基础教程

    JavaScript,简称JS,是一种轻量级的解释型编程语言,广泛应用...随着对JavaScript的理解加深,还可以探索更高级的主题,如面向对象编程、闭包、异步编程以及现代JavaScript特性,如箭头函数、模板字符串、Promise等。

    javascript+html实现的时钟

    为了确保显示两位数,我们对小时、分钟和秒进行检查,如果它们小于10,就在前面添加一个零。最后,使用`document.getElementById`找到`clock`元素,并通过`textContent`属性设置它的文本为当前时间。 `setInterval`...

    Javascript-从入门到精通2.txt

    ### JavaScript:从入门到精通 #### 一、JavaScript 概述与互联网的发展 JavaScript 是一种广泛使用的编程语言,尤其在 Web 开发领域占有极其重要的地位。随着互联网技术的飞速发展,JavaScript 的重要性日益凸显...

    利用JAVASCRIPT点击按钮播放音乐

    在网页开发中,JavaScript是一种非常重要的脚本语言,它允许我们实现动态交互的效果,比如点击按钮播放音乐。本文将深入探讨如何使用JavaScript实现这一功能,包括HTML基础、JavaScript语法以及音频API的使用。 ...

Global site tag (gtag.js) - Google Analytics