>웹 프론트엔드 >JS 튜토리얼 >자바스크립트 지식 포인트 모음_기본 지식

자바스크립트 지식 포인트 모음_기본 지식

WBOY
WBOY원래의
2016-05-16 19:18:57888검색
1. 네 가지 브라우저에 의한 document.body의 clientHeight, offsetHeight 및 scrollHeight 해석.

4가지 브라우저는 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox)입니다.

clientHeight
clientHeight에 대해 누구도 이의를 제기하지 않습니다. 그들은 모두 콘텐츠가 보이는 영역의 높이, 즉 콘텐츠가 보이는 영역의 높이라고 생각합니다. 페이지 브라우저는 일반적으로 표시줄 아래부터 상태 표시줄 위까지의 영역은 페이지 콘텐츠와 관련이 없습니다.

offsetHeight
IE와 Opera는 offsetHeight = clientHeight 스크롤 막대 테두리를 믿습니다.
NS와 FF는 offsetHeight가 웹페이지 콘텐츠의 실제 높이이며 clientHeight보다 작을 수 있다고 믿습니다.

scrollHeight
IE와 Opera는 scrollHeight가 웹페이지 콘텐츠의 실제 높이이며 clientHeight보다 작을 수 있다고 믿습니다.
NS와 FF는 scrollHeight가 웹페이지 콘텐츠의 높이라고 생각하지만 최소값은 clientHeight입니다.

간단히 말하면
clientHeight는 브라우저를 통해 콘텐츠가 보이는 영역의 높이입니다.
NS와 FF는 offsetHeight와 scrollHeight가 모두 웹 콘텐츠 높이라고 생각하지만 웹 콘텐츠 높이가 clientHeight보다 작거나 같은 경우 scrollHeight 값은 clientHeight이고 offsetHeight는 clientHeight보다 작을 수 있습니다.
IE와 Opera는 offsetHeight가 가시 영역 clientHeight 스크롤 막대와 테두리라고 믿습니다. scrollHeight는 웹페이지 콘텐츠의 실제 높이입니다.

마찬가지로
clientWidth, offsetWidth, scrollWidth에 대한 설명은 위와 동일하며 높이를 너비로 바꾸면 됩니다.

그러나
FF는 DOCTYPE별로 clientHeight를 다르게 해석하는데, xhtml 1 trasitional에서는 위와 같이 설명되지 않습니다. 다른 브라우저에는 이 문제가 없습니다.


2.JS는 clientHeight와 scrollTop을 가져옵니다
먼저 데이터가 나오면 다음 표의 값은 document.body.clientHeight / document.documentElement입니다. clientHeight

IE FF
Html 608/0 630/11096
Xhtml 10942/591 11076/630

html/xhtml 및 ie/ff의 네 가지 순열 및 조합에서, 얻은 clientHeight는 거의 없습니다. 마찬가지로 3개의 브라우저와 2개의 페이지 표준과 호환되는 js 스크립트를 작성하는 것이 골치 아픈 일이라는 것을 알 수 있습니다.

임시 요약 판단 방법은 다음과 같습니다.
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); 최종 결과는 상대적으로 일관적입니다.

안전하게 scrollTop 가져오기:
document.body.scrollTop document.documentElement.scrollTop

브라우저 유형 결정:
var ua = navigator .userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua. indexOf (" 오페라") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;


3. js 획득 플래시 객체 메소드 요약

IE, FF, Maxthon은 document.getElementById(id)를 사용합니다
Opera는 document.embeds(id)를 사용합니다

var isOpera=(window .opera&&navigator.userAgent.match(/opera/gi))?true:false;

if(isOpera){
var oswf = document.embeds('ad_flipper_swf');
}else{
var oswf = document.getElementById('ad_flipper_swf');
}


4.js 실행 순서
1. 동시에 다른 코드 블록. 레벨, 코드 블록 사이의 실행 순서는 위에서 아래입니다.
2. 코드가 코드에 포함되면 상위 코드 블록이 먼저 실행되고 그 다음 하위 코드 블록이 포함된 코드가 실행됩니다.
코드는 document.write를 통해 입력된 모든 코드가 아니라 한 파일이 다른 A 파일을 도입한다는 것을 의미합니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.