console 控制台 CSS样式使用笔记

最新推荐文章于 2024-06-26 15:59:19 发布

Kuukiliselessness

最新推荐文章于 2024-06-26 15:59:19 发布

阅读量2.5k

点赞数

文章标签： console 控制台 CSS样式

本文链接：https://blog.csdn.net/weixin_42731553/article/details/97788537

版权

本文介绍了如何在JavaScript控制台使用%c指令为输出的内容添加CSS样式，通过%c将文本分成不同部分并应用样式。示例展示了如何设置样式，并提到控制台样式语法与CSS相似但只支持部分特性。文章邀请读者分享更多控制台的趣味用法或指出可能存在的问题。

摘要由CSDN通过智能技术生成

控制台可以使用%c为打印内容定义样式，%c之前的文本不受影响，之后的文本内容受后面参数中的CSS样式影响。
You can use the %c directive to apply a CSS style to console output. The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.

（*英文能力有限，有能力的朋友可以参考下mozilla的文档）#我是传送门

讲道理这个讲的不是很明确。或者说本人理解能力有限？

下面详细举例说明一下。

先上个实例以便说明

console.log(
  '%c %c\n%c测试%c控制台', `
  padding: 40px 40px;
  margin-bottom: 5px;
  line-height: 0px;
  background-color: #ccc;
  `, `
  `, `
  color: #f3f3f4;
  margin-bottom: 5px;
  padding: 4px 3px 4px 11px;
  background-color: #FF3D45;