📅 最后修改于: 2023-12-03 15:00:01.619000 🧑 作者: Mango
console.log() 是一个用于在 JavaScript 控制台中打印输出信息的方法。但是，默认情况下，输出信息的样式非常简单。这时，我们可以使用 CSS 为输出信息添加样式，以增强可读性和可视化效果。以下是一个介绍如何使用 CSS 样式来美化 console.log() 输出信息的指南。
在 console.log() 中添加 CSS 样式可以通过以下步骤来实现：
在控制台中输入下面这句代码，可以创建一个带样式的输出：
console.log('%c Output with style.', 'color: red; background: yellow; font-size: 20px;')
在 %c 后面添加你想要设置样式的文本，然后在后面的参数中定义样式，使用分号分隔每个样式属性。
在这个例子中，我们设置了文本颜色为红色，背景颜色为黄色，字体大小为 20px。
打印 HTML 元素的样式
你也可以在控制台中打印 HTML 元素，并添加样式。下面是一个例子：
console.log('%c This is a button', 'color: white; background: green; padding: 5px 10px; border-radius: 5px;')
在这个例子中，我们创建了一个样式为绿色背景、白色字体、带有圆角边框的按钮。
你可以使用以下代码将每个 console.log() 的输出分隔开：
console.log('\n-----------------------\n');
在控制台中，输出将会被水平的分隔成两个部分。
如果你想要在控制台中添加垂直分割线，你可以使用以下代码：
console.log('|');
使用 CSS 样式可以为 console.log() 输出信息增加可读性和可视化效果。你可以为文本设置不同的颜色、大小、样式等等。通过实验来发现更多的可能性，以确保在控制台中获得最佳的可视化效果。