阅读 963

给console来的样式

示例

在使用JavaScript开发时, console 的使用率是非常高的。

但往往因为熟悉而忽略了很多有趣的玩法。

比如vue的开发者,通常会在chrome浏览器装上 Vue.js devtools 这款插件。在开发过程中,这款插件会在控制台打印以下内容。



实现方法

这种输出其实并不是什么黑科技,只要懂 css 就能实现。

console 添加样式,需要使用到占位符:%c

console.log(
  `%c vue-devtools %c Detected Vue v2.6.11 %c`,
  'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
  'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
  'background:transparent'
)
复制代码

上面的代码最终输出

代码的第二行,是输出文本内容,而其中有3个 %c ,分别对应3-5行的样式。

根据MDN的描述:

可以使用 %c 为打印内容定义样式,指令前的文本不会受到影响,但指令后的文本将会使用参数中声明的 CSS 样式。

developer.mozilla.org/zh-CN/docs/…

意思就是每个 %c 对应的样式,会影响 %c 后面的文本样式。

但后面的 %c 会覆盖前面 %c 的样式,并且不会继承前面的 %c 的样式。

如果输出的文本里面希望包含 “%c” 这个字符,可以使用 “%%c” 的方式进行转义。



存储样式多次调用

如果需要多次使用,可以使用字符串类型的变量把样式存起来。

let style1 = function () {
  return 'color: pink; font-size: 30px; text-shadow: 0 0 10px rgba(255, 255, 255, 1)'
}

let style2 = 'color: yellow; background: yellowgreen;'
console.log('%chello %cworld', style1(), style2)
复制代码

以上写法都是合法的,只不过样式写得非常丑而已~

由于我的电脑进入了夜间模式,浏览器默认使用了黑暗的皮肤,所以背景色变成黑色了。



参考

console 还支持以下样式:

  • background 与其全写版本。
  • border 与其全写版本。
  • border-radius
  • box-decoration-break
  • box-shadow
  • clearfloat
  • color
  • cursor
  • display
  • font 与其全写版本。
  • line-height
  • margin
  • outline 与其全写版本。
  • padding
  • text-transform 这类 text-* 属性
  • white-space
  • word-spacingword-break
  • writing-mode

注意: 控制台信息的默认行为与行内元素相似。为了应用 padding, margin 这类效果,应当先这样设置 display: inline-block

更多 console的玩法可以查阅 MDN 文档 - console玩法

文章分类
前端
文章标签