JS에서 BOM과 관련된 응용 능력은 무엇입니까?
JS는 세 부분으로 구성되어 있으며 그 중 하나는 브라우저를 작동하는 데 사용되는 BOM이라고 말한 적이 있습니다. 이번 글에서는 주로 BOM 애플리케이션을 소개하겠습니다. 관심 있는 친구들은 함께 살펴보세요
JS는 세 부분으로 구성되어 있다고 말한 적이 있는데, 그 중 하나가 브라우저를 작동하는 데 사용되는 BOM입니다. 이번 강의에서는 주로 BOM을 소개하겠습니다.
BOM 기본
먼저 BOM의 가장 기본적인 기능을 살펴보겠습니다. 창 열기 및 닫기:
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value="打开窗口" onclick="window.open('http://www.zhinengshe.com/');" /> </body></html>
open 메소드는 창을 여는 데 사용되고 해당 close 메소드는 창을 닫는 데 사용됩니다. 창문. 여기에서 open 메소드를 사용하여 애플리케이션을 구현할 수 있습니다. 코드를 실행하세요.
그 전에 document.write에 대한 약간의 지식을 추가하고 싶습니다.
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value="write" onclick="document.write('abc')" /> </body></html>
소스 코드를 열면 버튼을 클릭하면 전체 페이지의 소스 코드에 "abc"만 포함되어 있음을 알 수 있습니다. 즉, 이벤트에서 document.write를 사용하는 경우 해당 페이지는 먼저 완전히 지워집니다.
실행 중인 코드 사례에서는 document.write 메서드를 사용하는 것이 매우 적절하다는 것을 알 수 있습니다.
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
var oNewWin=window.open('about:blank', '_blank');
oNewWin.document.write(oTxt.value);
};
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br>
<input id="btn1" type="button" value="运行" />
</body></html>여기서 _blank는 새 창(_self로 이 창에서 열기)을 나타내고 about:blank는 열린 창을 나타냅니다. 빈 창을 열고 document.write를 사용하여 새 창에 html을 쓴 다음 새 창에서 html 코드를 실행할 수 있습니다.
오픈에 대해 이야기한 후 클로즈에 관한 몇 가지 문제에 대해 이야기해 보겠습니다. 닫기의 사용은 매우 간단합니다. 창을 닫는 이벤트를 실행하려면 window.close를 사용하세요. 단, Firefox 브라우저에서는 사용자가 연 창을 닫는 것이 불가능합니다. open 메소드로 창을 연 경우에만 close 메소드로 닫을 수 있습니다.
열기 및 닫기 메서드에 대해 이야기한 후 일반적으로 사용되는 두 가지 속성인 window.nevigator.userAgent 및 window.location에 대해 이야기해 보겠습니다. 전자의 기능은 현재 브라우저의 버전 정보를 얻는 것이고, 후자의 기능은 현재 웹페이지의 주소(읽을 수 있을 뿐만 아니라 할당도 할 수 있고, 현재 웹의 URL을 얻는 것)입니다. 페이지는 위치를 수정하여 이동할 수 있습니다. 반환된 내용은 여기에 나열되지 않습니다.
크기와 좌표
여기에서는 크기와 좌표에 관한 JS의 내용을 논의합니다.
가장 먼저 언급해야 할 것은 시각적 영역의 크기에 대한 지식입니다. 보기 영역 크기는 얼마입니까? 실제로 클라이언트가 화면에서 볼 수 있는 웹페이지 부분의 크기입니다. 표시 가능한 영역의 크기는 창 크기에 따라 변경됩니다.
document.documentElement.clientWidth 및 document.documentElement.clientHeight를 통해 현재 페이지의 시각적 영역의 너비와 높이를 얻을 수 있습니다. document.documentElement.clientWidth和document.documentElement.clientHeight可以获取当前页面可视区的宽度和高度。
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
alert('宽:'+document.documentElement.clientWidth+'高:'+document.documentElement.clientHeight);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="可视区大小" />
</body></html>效果如下：
此外针对可视区，还有一个属性叫scrollTop，也就是滚动距离，或者说是可视区到页面顶端的距离。
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
document.onclick=function ()
{
//IE、FF
//alert(document.documentElement.scrollTop);
//chrome
//alert(document.body.scrollTop);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
alert(scrollTop);
};
</script>
</head>
<body style="height:2000px;">
</body></html>效果如下：
//这里有图
值得注意的是document.documentElement.scrollTop仅仅在ie下兼容，在chrome下的写法则为document.body.scrollTop
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#p1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
body {height:2000px;}
</style>
<script>
window.onscroll=function ()
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var op=document.getElementById('p1'); op.style.top=document.documentElement.clientHeight-op.offsetHeight+scrollTop+'px';
};
</script>
</head>
<body>
<p id="p1"></p>
</body></html>효과는 다음과 같습니다.
또한 뷰포트에는 스크롤 거리, 즉 뷰포트에서 페이지 상단까지의 거리인 scrollTop이라는 속성도 있습니다.
window.onscroll=window.onresize=function (){...}효과는 다음과 같습니다:
document.documentElement.scrollTop은 IE에서만 호환되며 Chrome에서의 쓰기 규칙은 document.body .scrollTop이므로 || 메서드를 사용하여 호환성 문제를 처리합니다. 일반적인 방법 및 이벤트
여기에서는 요소의 고정 위치 지정을 달성하기 위해 고정 이외의 다른 방법을 사용하려고 합니다(고정은 ie6에서 호환되지 않습니다). 
검은색 선의 길이를 계산하면 오른쪽 아래의 p 블록을 고정하고 위치를 지정할 수 있음을 알 수 있습니다. 검은색 선의 길이는 시각적 영역의 높이에서 p 블록의 offsetHeight를 뺀 것과 정확히 같습니다.
rrreee- 효과는 다음과 같습니다:
- onscroll 기능이 계속 발생하고 발생할 때마다 호출되므로 p 블록에 약간의 지터가 있는 것을 볼 수 있습니다. 게다가 더 심각한 상황이 있습니다. 창 크기를 변경하면 p 블록이 따르지 않고 그대로 유지되므로 다른 이벤트인 window.onresize(페이지 크기가 변경될 때 트리거되는 이벤트)를 사용해야 합니다. ): rrreee
- 마지막으로 일반적으로 사용되는 몇 가지 시스템 대화 상자에 대해 이야기해 보겠습니다.
자바스크립트를 사용하여 특정 기간 내 매일 다른 가격을 얻는 방법
위 내용은 JS에서 BOM과 관련된 응용 능력은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7552
15
1382
52
83
11
58
19
22
91
iPhone 홈 화면에서 삭제를 취소하는 방법
Apr 17, 2024 pm 07:37 PM
홈 화면에서 중요한 항목을 삭제하고 다시 복구하려고 하시나요? 다양한 방법으로 앱 아이콘을 화면에 다시 표시할 수 있습니다. 우리는 당신이 따라갈 수 있는 모든 방법과 홈 화면에 앱 아이콘을 다시 넣을 수 있는 방법에 대해 논의했습니다. 방법 1 - 앱 라이브러리에서 앱 아이콘 바꾸기 앱 라이브러리에서 직접 홈 화면에 앱 아이콘을 배치할 수 있습니다. 1단계 – 옆으로 스와이프하여 앱 라이브러리의 모든 앱을 찾습니다. 2단계 – 이전에 삭제한 앱 아이콘을 찾습니다. 3단계 – 메인 라이브러리의 앱 아이콘을 홈 화면의 올바른 위치로 드래그하기만 하면 됩니다. 이것은 응용 다이어그램입니다
PHP에서 화살표 기호의 역할과 실제 적용
Mar 22, 2024 am 11:30 AM
PHP에서 화살표 기호의 역할과 실제 적용 PHP에서 화살표 기호(->)는 일반적으로 객체의 속성과 메서드에 액세스하는 데 사용됩니다. 객체는 PHP의 객체지향 프로그래밍(OOP)의 기본 개념 중 하나입니다. 실제 개발에서는 객체를 조작할 때 화살표 기호가 중요한 역할을 합니다. 이 기사에서는 화살표 기호의 역할과 실제 적용을 소개하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 객체의 속성에 접근하기 위한 화살표 기호의 역할 화살표 기호를 사용하여 객체의 속성에 접근할 수 있습니다. 쌍을 인스턴스화할 때
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
초보자부터 숙련자까지: Linux tee 명령의 다양한 응용 시나리오 탐색
Mar 20, 2024 am 10:00 AM
Linuxtee 명령은 기존 출력에 영향을 주지 않고 출력을 파일에 쓰거나 출력을 다른 명령으로 보낼 수 있는 매우 유용한 명령줄 도구입니다. 이 기사에서는 초보자부터 숙련자까지 Linuxtee 명령의 다양한 애플리케이션 시나리오를 심층적으로 살펴보겠습니다. 1. 기본 사용법 먼저 tee 명령어의 기본 사용법을 살펴보겠습니다. tee 명령의 구문은 다음과 같습니다: tee[OPTION]...[FILE]...이 명령은 표준 입력에서 데이터를 읽고 데이터를 다음 위치에 저장합니다.
Go 언어의 장점과 적용 시나리오를 살펴보세요.
Mar 27, 2024 pm 03:48 PM
Go 언어는 Google이 개발하여 2007년에 처음 출시된 오픈 소스 프로그래밍 언어입니다. 간단하고 배우기 쉽고 효율적이며 동시성이 높은 언어로 설계되었으며 점점 더 많은 개발자가 선호합니다. 이 기사에서는 Go 언어의 장점을 살펴보고 Go 언어에 적합한 몇 가지 애플리케이션 시나리오를 소개하며 구체적인 코드 예제를 제공합니다. 장점: 강력한 동시성: Go 언어에는 동시 프로그래밍을 쉽게 구현할 수 있는 경량 스레드 고루틴에 대한 지원이 내장되어 있습니다. Goroutin은 go 키워드를 사용하여 시작할 수 있습니다.
js와 vue의 관계
Mar 11, 2024 pm 05:21 PM
js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.
클라우드 컴퓨팅 분야에서 Linux의 광범위한 적용
Mar 20, 2024 pm 04:51 PM
클라우드 컴퓨팅 분야에서 Linux의 광범위한 적용 클라우드 컴퓨팅 기술의 지속적인 개발 및 대중화와 함께 Linux는 오픈 소스 운영 체제로서 클라우드 컴퓨팅 분야에서 중요한 역할을 담당합니다. 안정성, 보안성 및 유연성으로 인해 Linux 시스템은 다양한 클라우드 컴퓨팅 플랫폼 및 서비스에서 널리 사용되며 클라우드 컴퓨팅 기술 개발을 위한 견고한 기반을 제공합니다. 이 기사에서는 클라우드 컴퓨팅 분야에서 Linux의 광범위한 애플리케이션을 소개하고 구체적인 코드 예제를 제공합니다. 1. 클라우드 컴퓨팅 플랫폼에서 리눅스의 애플리케이션 가상화 기술 가상화 기술
MySQL 타임스탬프 이해: 기능, 특징 및 애플리케이션 시나리오
Mar 15, 2024 pm 04:36 PM
MySQL 타임스탬프는 날짜, 시간 또는 날짜와 시간을 저장할 수 있는 매우 중요한 데이터 유형입니다. 실제 개발 과정에서 타임스탬프를 합리적으로 사용하면 데이터베이스 운영 효율성을 높이고 시간 관련 쿼리 및 계산을 용이하게 할 수 있습니다. 이 기사에서는 MySQL 타임스탬프의 기능, 특징 및 애플리케이션 시나리오를 논의하고 특정 코드 예제를 통해 설명합니다. 1. MySQL 타임스탬프의 기능 및 특징 MySQL에는 두 가지 유형의 타임스탬프가 있는데, 하나는 TIMESTAMP입니다.
