How to print using javascript-Front-end Q&A-php.cn

How to print using javascript

藏色散人

Release： 2023-01-07 11:44:01

Original

2304 people have browsed it

JavaScript does not provide any built-in printing or display functions, but it can "display" data in different ways, namely: 1. "window.alert()"; 2. "document.write( )"; 3. "innerHTML"; 4. "console.log()".

How to print using javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, DELL G3 computer

How to print javascript?

JavaScript does not provide any built-in printing or display functions.

JavaScript display scheme

JavaScript can "display" data in different ways:

Use window.alert() to write an alert box

Use document.write() to write HTML output

Use innerHTML to write HTML elements

Use console.log() to write to the browser console

Use innerHTML

To access HTML elements, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML attribute defines HTML content:

Example

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

Copy after login

Tip: Changing the innerHTML attribute of an HTML element is a common way to display data in HTML.

Use document.write()

For testing purposes, it is more convenient to use document.write():

Example

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

Copy after login

Note: Using document.write() after the HTML document is fully loaded will delete all existing HTML:

Example

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

Copy after login

Tip: The document.write() method is for testing only .

Using window.alert()

You can use an alert box to display data:

Example

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

Copy after login

Using console.log()

In a browser, you can use the console.log() method to display data.

Please activate the browser console via F12 and select "Console" in the menu.

Example

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

Copy after login

Recommended study: "javascript Advanced Tutorial"

The above is the detailed content of How to print using javascript. For more information, please follow other related articles on the PHP Chinese website!