当前位置: 开发笔记 > 前端 > 正文

!DOCTYPE声明对JavaScript的影响分析

作者：圈闭仔笨仔 | 来源：互联网 | 2022-09-21 03:20

DOCTYPE是documenttype(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。

要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效；当然对JS的取值也会有影响。

DOCTYPE声明如下：

DOCTYPE声明包括：过渡型（Transitional），严格型（Strict）和框架型（Frameset）。接下来就看一下这三种类型对不同浏览器在获取元素相关信息时的影响（包括不定义DOCTYPE和只将DOCTYPE定义为形式），我测试的浏览器分别为：IE6.0、IE7.0、IE8.0（变态模式）、FF、Opera、Chrome和Safari。由于IE5.5已经几乎被淘汰，所以不在测试范围之内。

以下就是测试结果（滚动条只是元素本身的滚动条并不是窗口的）：

一、过渡型（Transitional）

1、测试IE6.0、IE7.0与IE8.0（非变态模式Quirks）的宽度和高度（width，height）

offsetWidth，offsetHeight	clientWidth，clientHeight	currentStyle[‘width']，currentStyle[‘width']
有无滚动条均为： offsetWidth= paddingLeft+paddingRight+borderLeft+borderRight offsetHeight= paddingTop+paddingBottom+borderTop+boderBottom	1、无滚动条 clientWidth=CSS中定义的宽度+paddingLeft+paddingRight clientHeight=CSS中定义的高度+paddingTop+paddingBottom （均不包括边框宽度） 2、有滚动条 clientWidth=CSS中定义的宽度-滚动条宽度（17固定值）-边框宽度， clientHeight=CSS中定义的高度-滚动条宽度（17固定值）-边框宽度	实际真实宽度，不包括padding与边框值（除IE和Opera以外无此属性）
offsetLeft，offsetTop	clientLeft，clientTop	currentSytle[‘left']，currentStyle[‘top']
有无滚动条均为： offsetLeft=对象的offsetLeft-边框 offsetTop=实际值	有无滚动条均为：边框的宽度	除IE和Opera以外无此属性

2、测试IE8.0变态模式(Quirks)的宽度与高度（width，height）

offsetWidth，offsetHeight	clientWidth，clientHeight
1、（无滚动条）宽度（高度）=当前对象的实际数值 2、（有滚动条）宽度（高度）=CSS中定义的数值	1、（无滚动条）宽度（高度）=当前对象的实际数值 2、（有滚动条）宽度（高度）=当前对象在CSS中定义的数值-滚动条（17）	有无滚动条均为：宽度和高度均为CSS中定义的数值
offsetLeft，offsetTop	clientLeft，clientTop
有无滚动条均为： offsetLeft（offsetTop）=实际值	有无滚动条均为：边框的宽度	除IE和Opera以外无此属性

3、FF、Opera、Safari和Chrom中所取得的数值与第一种情况一样。

二、严格型（Strict）

1、测试IE6.0、IE7.0与IE8.0（非变态模式Quirks）的宽度和高度（width，height）

offsetWidth，offsetHeight	clientWidth，clientHeight	currentStyle[‘width']，currentStyle[‘width']
有无滚动条均为： offsetWidth= paddingLeft+paddingRight+borderLeft+borderRight offsetHeight= paddingTop+paddingBottom+borderTop+boderBottom	1、无滚动条 clientWidth=CSS中定义的宽度+paddingLeft+paddingRight clientHeight=CSS中定义的高度+paddingTop+paddingBottom 均不包括边框宽度 2、有滚动条 clientWidth=CSS中定义的宽度-滚动条宽度（17固定值）-边框宽度， clientHeight=CSS中定义的高度-滚动条宽度（17固定值）-边框宽度	实际真实宽度，不包括padding与边框值（除IE和Opera以外无此属性）
offsetLeft，offsetTop	clientLeft，clientTop	currentSytle[‘left']，currentStyle[‘top']
有无滚动条均为： offsetLeft=对象的offsetLeft-边框 offsetTop=实际值	有无滚动条均为：边框的宽度	除IE和Opera以外无此属性

2、测试IE8.0变态模式(Quirks)的宽度与高度（width，height）

offsetWidth，offsetHeight	clientWidth，clientHeight	currentStyle[‘width']，currentStyle[‘height]
1、（无滚动条）宽度（高度）=当前对象的实际数值 2、（有滚动条）宽度（高度）=CSS中定义的数值	1、（无滚动条）宽度（高度）=当前对象的实际数值 2、（有滚动条）宽度（高度）=当前对象在CSS中定义的数值-滚动条（17）-边框宽度	有无滚动条均为：宽度和高度均为CSS中定义的数值（除IE和Opera以外无此属性）
offsetLeft，offsetTop	clientLeft，clientTop
有无滚动条均为： offsetLeft（offsetTop）=实际值	有无滚动条均为：边框的宽度	除IE和Opera以外无此属性

3、FF、Opera、Safari和Chrom中所取得的数值与第一种情况一样。

三、取消DOCTYPE声明

1、IE6.0、IE7.0在没有DOCTYPE声明时与IE8.0中的变态模式（Quirks）中严格型结果相同。

2、FF、Safari、Chrome和IE8.0标准模式是与过渡型结果相同。

3、Opera浏览器中，在元素没有滚动条时offsetHeight与clientHeight的取值是在其当前现实的大小。

四、将DOCTYPE声明改写为

1、IE6.0、IE7.0在没有DOCTYPE声明时与IE8.0中的变态模式（Quirks）中严格型结果相同。

2、FF、Safari、Chrome和IE8.0标准模式是与过渡型结果相同。

3、Opera浏览器中，在元素没有滚动条时offsetHeight与clientHeight的取值是在其当前现实的大小。

在Opera中也拥有与IE一样的属性“currentStyle”，所以在Opera中也可以使用currentStyle来取得元素的精确值。

推荐阅读

chrome
CSS中的pointer-events属性详解与应用

在CSS中，`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时，通过设置`pointer-events`属性，可以决定该元素是否能够接收鼠标点击、悬停等交互操作，从而实现更灵活的用户界面设计。例如，将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件，方便实现复杂的叠加效果和交互逻辑。 ... [详细]

蜡笔小新 2024-11-02 15:11:13
chrome
HTML5 Web存储技术详解：从基础到应用全面解析

HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一，因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API，使得Web应用程序能够在浏览器中高效地存储数据，从而提升了应用的性能和用户体验。相较于传统的Cookie机制，Web Storage不仅提供了更大的存储容量，还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用，全面解析HTML5 Web存储技术，帮助读者深入了解其工作原理和应用场景。 ... [详细]

蜡笔小新 2024-10-26 20:33:04
chrome
深入解析 JavaScript 中的引用类型：Function 类型详解

定义Function类型：1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]

蜡笔小新 2024-10-23 18:32:08
view
优化后的标题：hCalendar微格式：深入解析事件与时间、地点相关的活动标记方法

本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇，前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记，提高事件信息的可读性和互操作性。 ... [详细]

蜡笔小新 2024-11-04 17:57:52
chrome
TypeScript 实战分享：Google 工程师深度解析 TypeScript 开发经验与心得

TypeScript 实战分享：Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]

蜡笔小新 2024-11-04 12:55:23
chrome
JavaScript 和 HTML 模拟工具：高效开发与测试解决方案

为了满足专业设计师的需求，我需要一个工具，能够将使用JQuery构建的动态页面转换为纯静态HTML，而无需引用任何JavaScript文件。该工具应具备模拟当前页面的功能，以确保在开发和测试过程中保持页面的完整性和一致性。此外，该工具还应支持高效的页面调试和优化，以便设计师能够快速验证和调整页面布局及样式。 ... [详细]

蜡笔小新 2024-11-02 13:51:56
chrome
利用Python高效抓取微博文本与动态网页图像数据

本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码，展示了如何利用爬虫技术获取微博内容和动态图片，为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者，本文具有较高的参考价值。 ... [详细]

蜡笔小新 2024-10-31 14:48:38
chrome
软件测试工程师必备：全面解析Web应用的浏览器兼容性测试方法与工具

随着市场上浏览器种类的不断增多，特别是在平板和移动设备上的普及，确保网站在各种浏览器中都能正常运行变得尤为重要。本文将深入探讨Web应用的浏览器兼容性测试方法与工具，帮助软件测试工程师全面掌握这一关键技能，以提高应用的用户体验和可靠性。 ... [详细]

蜡笔小新 2024-10-31 07:56:54
chrome
可转债数据智能抓取与分析平台优化

本项目旨在优化可转债数据的智能抓取与分析平台。通过爬取集思录上的可转债信息（排除已发布赎回的债券），并结合安道全教授提出的三条安全线投资策略，新增了建仓线、加仓线和重仓线，以提供更精准的投资建议。 ... [详细]

蜡笔小新 2024-10-30 17:40:17
chrome
全面解析 HTML 中的 margin 属性及其应用

本文深入探讨了 HTML 中的 `margin` 属性，详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念，还重点讨论了垂直外边距合并现象，并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例，帮助读者全面理解 `margin` 的使用技巧和常见问题。 ... [详细]

蜡笔小新 2024-10-30 15:08:31
chrome
【Python爬虫实操】不创作小说，专精网站内容迁移，超高效！（含源代码）

本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移，涵盖前端、后端及Android相关知识点。通过具体实例和源代码，展示了如何精准抓取并迁移网站内容，适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]

蜡笔小新 2024-10-28 20:00:28
chrome
深入浅出解析HTTP协议的核心功能与应用

前言——协议是指预先设定的通信规则，确保双方能够按照既定标准进行有效沟通，从而实现准确的信息交换。例如，驯兽师通过拍手使动物坐下，这实际上是一种预设的协议。本文将详细探讨HTTP协议的核心功能及其广泛应用，解析其在现代网络通信中的重要作用。 ... [详细]

蜡笔小新 2024-10-26 18:47:54
chrome
提升阅读沉浸感：精选Chrome扩展带来极致体验

在信息爆炸的时代，提升阅读体验显得尤为重要。简悦SimpRead等精选Chrome扩展工具，不仅能够净化页面，去除干扰元素，还能通过优化排版和字体，为用户提供更加舒适、沉浸式的阅读环境，让文字内容更加赏心悦目，帮助读者更好地吸收信息。 ... [详细]

蜡笔小新 2024-10-25 16:04:47
chrome
适用于 SSR/WASM 的 ZXing Blazor 扫码组件，高效集成与优化

本项目基于 ZXing 封装了适用于 SSR 和 WASM 的 Blazor 扫码组件，能够高效地集成到 Blazor 应用中，并支持通过手机或桌面电脑的摄像头进行扫码操作。该组件库不仅简化了开发流程，还提供了高性能的扫码体验。项目地址：[链接] ... [详细]

蜡笔小新 2024-10-24 13:09:48
chrome
爬虫技术初探：requests库基础教程第二部分

（1）搜狗搜索人物实战 importrequestsurlhttps:www.sogou.comweb?query李荣浩 #首先我们需要观察在搜狗输入李 ... [详细]

蜡笔小新 2024-10-23 10:44:42

圈闭仔笨仔

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章