给console加样式

刚刚发现一个比较好玩的东西
在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'
)

%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, 文章2

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！