자바스크립트를 사용하여 인쇄하는 방법-프런트엔드 Q&A-php.cn

자바스크립트를 사용하여 인쇄하는 방법

藏色散人

풀어 주다： 2023-01-07 11:44:01

원래의

2167명이 탐색했습니다.

Javascript는 내장된 인쇄 또는 표시 기능을 제공하지 않지만 다음과 같은 다양한 방법으로 데이터를 "표시"할 수 있습니다. 1. "window.alert()"; 2. "document.write()"; , "innerHTML"; 4. "console.log()".

자바스크립트를 사용하여 인쇄하는 방법

이 기사의 운영 환경: windows7 시스템, javascript 버전 1.8.5, DELL G3 컴퓨터

javascript로 인쇄하는 방법

JavaScript는 내장된 인쇄 또는 표시 기능을 제공하지 않습니다.

JavaScript 표시 솔루션

JavaScript는 다양한 방식으로 데이터를 "표시"할 수 있습니다.

window.alert()를 사용하여 경고 상자 작성

document.write()를 사용하여 HTML 출력 작성

innerHTML을 사용하여 HTML 작성 요소

console.log()를 사용하여 브라우저 콘솔에 쓰기

innerHTML 사용

HTML 요소에 액세스하려면 JavaScript에서 document.getElementById(id) 메서드를 사용할 수 있습니다.

id 속성은 HTML 요소를 정의합니다. innerHTML 속성은 HTML 콘텐츠를 정의합니다.

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

로그인 후 복사

팁: HTML 요소의 innerHTML 속성을 변경하는 것은 HTML로 데이터를 표시하는 일반적인 방법입니다.

Document.write() 사용

테스트 목적으로는 document.write()를 사용하는 것이 더 편리합니다.

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

로그인 후 복사

참고: HTML 문서가 완전히 로드된 후 document.write()를 사용하면 기존 일부 HTML 모두 삭제:

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>

로그인 후 복사

팁: document.write() 메서드는 테스트용으로만 사용됩니다.

window.alert() 사용

경고 상자를 사용하여 데이터를 표시할 수 있습니다.

예제

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

로그인 후 복사

console.log() 사용

브라우저에서는 console.log()를 사용할 수 있습니다. 데이터를 표시하는 방법.

F12를 통해 브라우저 콘솔을 활성화하고 메뉴에서 "콘솔"을 선택하세요.

예

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

로그인 후 복사

추천 학습: "javascript 고급 튜토리얼"

위 내용은 자바스크립트를 사용하여 인쇄하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

자바스크립트를 사용하여 인쇄하는 방법