JavaScript如何在浏览器控制台输出带样式的文字

作者:IT技术圈子 浏览量:483   发表于 2023-09-24 16:28 标签:

   打开百度首页、知乎、淘宝等大厂的官网,打开控制台可以看到控制台会自动输出带样式的文字

yyy

是不是感觉很酷,其实输出简单带样式的文字不难,通过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的第二、第三个参数填充。

二、查看效果

yyy

只需几行就能实现这样的效果,是不是很简单。