给console加样式

╰半橙微兮° 2023-01-02 07:27 200阅读 0赞

刚刚发现一个比较好玩的东西![在这里插入图片描述][20210105104530908.png]  
在console里边加图片, 然后试了一下果然可以, 先放下源代码

console.log(
          "%c ",
          "background: url(https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lpqpflo/ixigua_logo.svg) no-repeat;font-size:130px;line-height: 50px"
        )

其实要说也不难, 只是在console里边加了一些css样式.  
**注意:**

1.  需要用%c, 作为占位符;
2.  指令前的文本不会受到影响, 但指令后的文本将会使用参数中声明的css样式;
3.  控制台信息的默认行为与行内元素相似. 为了应用padding,margin这类效果, 应当设置`display:inline-block`;
4.  如果输出的文本中希望包含`%c`这个字符, 可以使用`%%c`的方式进行转义

console.log(
      `%c hello %c word %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'
    )

![在这里插入图片描述][20210105105616551.png]  
`%c`语法可用的属性如下

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

参考文章: [文章1, ][1_][文章2][2]

[20210105104530908.png]: /images/20221120/9cba3de7499f41f9bea83e624daef966.png
[20210105105616551.png]: /images/20221120/7758ac7d588c498384955f49d9596b83.png
[1_]: https://developer.mozilla.org/zh-CN/docs/Web/API/Console
[2]: https://juejin.cn/post/6911337056678379534