!DOCTYPE 선언이 JavaScript_javascript 기술에 미치는 영향 분석

要建立符合标准的网页，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	currentStyle[‘width']，currentStyle[‘height]
1、（无滚动条）宽度（高度）=当前对象的实际数值 2、（有滚动条）宽度（高度）=CSS中定义的数值	1、（无滚动条）宽度（高度）=当前对象的实际数值 2、（有滚动条）宽度（高度）=当前对象在CSS中定义的数值-滚动条（17）	有无滚动条均为： 宽度和高度均为CSS中定义的数值
offsetLeft，offsetTop	clientLeft，clientTop	currentSytle[‘left']，currentStyle[‘top']
有无滚动条均为： offsetLeft（offsetTop）=实际值	有无滚动条均为：边框的宽度	除IE和Opera以外无此属性

3, FF, Opera, Safari, Chrom에서 얻은 값은 첫 번째 경우와 동일합니다.

2. 엄격하다

1. IE6.0, IE7.0, IE8.0의 너비와 높이(너비, 높이) 테스트(비정상 모드 쿼크)

offsetWidth, offsetHeight

클라이언트 너비, 클라이언트 높이

현재 스타일['너비'], 현재 스타일['너비']

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以外无此属性

스크롤 막대 유무:
offsetWidth=
paddingLeft paddingRight borderLeft borderRight

offsetHeight=
paddingTop paddingBottom borderTop boderBottom

1. 스크롤 막대 없음
clientWidth=width paddingLeft paddingRight는 CSS에 정의됨

clientHeight=height paddingTop paddingBottom은 CSS에 정의됨
테두리 너비는 포함되지 않음

2 스크롤 막대
clientWidth=CSS에 정의된 너비-스크롤 막대 너비(17 고정 값)-테두리 너비,

clientHeight=CSS에 정의된 높이-스크롤 막대 너비(17 고정 값)- 테두리 너비

패딩 및 테두리 값을 제외한 실제 실제 너비
(IE 및 Opera를 제외하고는 해당 속성 없음)

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

offsetLeft, offsetTop

클라이언트왼쪽, 클라이언트탑

currentSytle['left'], currentStyle['top']

스크롤 막대 유무:
offsetLeft=offsetLeft-객체의 테두리
offsetTop=실제 값

스크롤 막대 유무: 테두리 너비

IE 및 Opera를 제외한 해당 속성 없음

2. IE8.0 비정상 모드의 너비와 높이(너비, 높이) 테스트(Quirks)

offsetWidth, offsetHeight	클라이언트 너비, 클라이언트 높이	현재 스타일['너비'], 현재 스타일['높이]
1. (스크롤 막대 없음) 너비(높이) = 현재 개체의 실제 값 2. (스크롤 막대 포함) 너비(높이) = CSS에 정의된 값	1. (스크롤 막대 없음) 너비(높이) = 현재 개체의 실제 값 2. (스크롤 막대 포함) 너비(높이) = 현재 개체의 CSS에 정의된 값 - 스크롤 막대( 17) - 테두리 너비	스크롤 막대 유무: 너비와 높이는 CSS에 정의된 값입니다 (IE 및 Opera를 제외하고 해당 속성이 없습니다)
offsetLeft, offsetTop	클라이언트왼쪽, 클라이언트탑	currentSytle['left'], currentStyle['top']
스크롤 막대 유무: offsetLeft(offsetTop)=실제값	스크롤 막대 유무: 테두리 너비	IE 및 Opera를 제외한 해당 속성 없음

3, FF, Opera, Safari, Chrom에서 얻은 값은 첫 번째 경우와 동일합니다. 3. DOCTYPE 문 취소 1. IE6.0과 IE7.0은 DOCTYPE 선언이 없는 경우 IE8.0의 비정상 모드(Quirks)와 동일한 엄격한 결과를 갖습니다. 2. FF, Safari, Chrome, IE8.0의 표준 모드는 전환 모드와 동일합니다. 3. Opera 브라우저에서 요소에 스크롤 막대가 없는 경우 offsetHeight 및 clientHeight 값은 현재 실제 크기를 기준으로 합니다. 4. DOCTYPE 문을 으로 다시 작성합니다. 1. IE6.0과 IE7.0은 DOCTYPE 선언이 없는 경우 IE8.0의 비정상 모드(Quirks)와 동일한 엄격한 결과를 갖습니다. 2. FF, Safari, Chrome, IE8.0의 표준 모드는 전환 모드와 동일합니다. 3. Opera 브라우저에서 요소에 스크롤 막대가 없는 경우 offsetHeight 및 clientHeight 값은 현재 실제 크기를 기준으로 합니다. Opera에는 IE와 동일한 "currentStyle" 속성이 있으므로 currentStyle을 사용하여 Opera에서 요소의 정확한 값을 얻을 수도 있습니다.