js display显示|极客笔记

js display显示

JavaScript是一种广泛使用的脚本语言，常用于Web开发。在JavaScript中，显示（display）是一项重要的功能，可以将数据、文本或元素展示给用户。本文将详解JavaScript中的显示功能，包括控制台打印、弹窗显示、DOM操作以及网页布局中的显示。

1. 控制台打印

控制台打印是JavaScript中最基本的显示方式，使用console.log()函数可以将数据、文本或对象打印到浏览器的开发者工具控制台中。这对于调试代码和输出调试信息非常有用。

示例代码：

var name = "John";
var age = 28;
console.log("I am " + name + " and I am " + age + " years old.");

运行结果：

I am John and I am 28 years old.

控制台打印还可以显示对象的属性和方法，方便开发者查看对象的结构和内容。

示例代码：

var person = {
  name: "John",
  age: 28,
  sayHello: function() {
    console.log("Hello, my name is " + this.name + ".");
  }
};

console.log(person);
person.sayHello();

运行结果：

Object {name: "John", age: 28, sayHello: ƒ}
Hello, my name is John.

2. 弹窗显示

除了在控制台打印，JavaScript还可以通过弹窗（如alert、confirm和prompt）的方式显示信息给用户。

2.1 alert弹窗

alert()函数可以弹出警告框，显示一段文本信息给用户，并等待用户点击确定按钮后关闭弹窗。

示例代码：

alert("Hello, World!");

运行结果：弹出一个带有文本”Hello, World!”的警告框。

2.2 confirm弹窗

confirm()函数可以弹出确认框，显示一段文本信息给用户，并等待用户点击确定或取消按钮后关闭弹窗。确认框通常用于需要用户确认或取消某个操作的场景，可以根据用户的选择进行不同的逻辑处理。

示例代码：

var result = confirm("Are you sure?");
if (result) {
  console.log("User clicked OK.");
} else {
  console.log("User clicked Cancel.");
}

运行结果：弹出一个包含文本”Are you sure?”的确认框，点击确定按钮打印”User clicked OK.”，点击取消按钮打印”User clicked Cancel.”。

2.3 prompt弹窗

prompt()函数可以弹出输入框，显示一段文本信息给用户，并等待用户输入后关闭弹窗。输入框通常用于需要用户输入一些内容的场景，可以获取用户输入的数据并进行后续处理。

示例代码：

var name = prompt("Please enter your name.");
console.log("Hello, " + name + "!");

运行结果：弹出一个带有输入框的弹窗，用户输入名字后，控制台输出”Hello, [输入的名字]!”。

3. DOM操作

在Web开发中，JavaScript常常用于操纵网页上的元素（如文本、表单和图像），实现动态的显示效果。

3.1 获取元素

通过document.getElementById()函数可以获取具有指定id的元素。

示例代码：

<!DOCTYPE html>
<html>
<body>

<h1 id="heading">Hello, World!</h1>

<script>
var element = document.getElementById("heading");
console.log(element.innerHTML);
</script>

</body>
</html>

运行结果：控制台打印”Hello, World!”，表示获取到了id为”heading”的元素，并获取了其内容。

3.2 修改样式

通过修改元素的样式，可以实现显示效果的改变。可以使用元素的style属性来修改CSS属性。

示例代码：

<!DOCTYPE html>
<html>
<body>

<h1 id="heading">Hello, World!</h1>

<script>
var element = document.getElementById("heading");
element.style.color = "red";
</script>

</body>
</html>

运行结果：将id为”heading”的元素的文本颜色修改为红色。

3.3 修改内容

通过修改元素的内容，可以实现动态的文本变化。可以使用元素的innerHTML属性来修改元素的HTML内容。

示例代码：

<!DOCTYPE html>
<html>
<body>

<h1 id="heading">Hello, World!</h1>

<script>
var element = document.getElementById("heading");
element.innerHTML = "Goodbye, World!";
</script>

</body>
</html>

运行结果：将id为”heading”的元素的内容修改为”Goodbye, World!”。