JavaScript如何在浏览器控制台输出带样式的文字
打开百度首页、知乎、淘宝等大厂的官网,打开控制台可以看到控制台会自动输出带样式的文字
是不是感觉很酷,其实输出简单带样式的文字不难,通过console.log来输出即可。接下来具体看看是怎么做到的。
一、编写代码
打开需要在控制台输出这样效果内容的页面,加入以下Javascript代码
<script>
var a ='color: #1e80ff;font-weight: bold;font-size: 26px';
var b ='color: orange;font-weight: bold;font-size: 26px';
console.log("%c 欢迎来到%cIT技术圈子~", a, b);
</script>
变量a和变量b是具体的样式,写法于CSS语法一致。
console.log的第一个参数是输出的具体的内容,其中样式使用%c表示,%c输出时最终由console.log的第二、第三个参数填充。
二、查看效果
只需几行就能实现这样的效果,是不是很简单。