前端console。log的样式
控制台是每个开发过程中非常有用的部分。我们出于各种原因使用它来记录项目、查看数据、保留某些数据以供以后使用等等。因此,考虑到经常要与它直接和间接地互动,我们介绍一种方法来赋予它美丽的外观,可以使输出的内容更加诱惑你的眼球。
在这篇文章中,我们将演示如何给console应用样式。让我们从记录一个简单的HelloWorld!开始。并对其应用样式。
输出粉色的文字
console。log(cHelloworld!,color:pink;fontsize:30px)
可以看到,其实就是对输出内容,应用了css样式而已,只要你会CSS,你就可以充分发挥你的想象力来定制化你的console。再来点例子:console。log(cThisisadefaultfontstyle,color:blue;fontsize:20px);console。log(cThisisacustomfontstyle,color:blue;fontfamily:serif;fontsize:20px);console。log(cThisisacustomfontstyle,color:blue;fontfamily:monospace;fontsize:20px);console。log(cThisisacustomfontstyle,color:blue;fontfamily:sansserif;fontsize:20px);
稍微复杂点的例子如下:console。log(cHelloWorld!!,fontweight:bold;fontsize:50px;color:red;textshadow:3px3px0rgb(217,31,38),6px6px0rgb(226,91,14),9px9px0rgb(245,221,8),12px12px0rgb(5,148,68),15px15px0rgb(2,135,206),18px18px0rgb(4,77,145),21px21px0rgb(42,21,113));
对了,你还可以改变背景颜色,甚至加入渐变色:
console。log(c太棒了!!,background:lineargradient(toright,fc5c7d,6a82fb);color:white;fontsize:40px;padding:15px;)
console。warn,console。error同样适用哦。
怎么样,是不是很酷?
最后提醒大家,不要忘记要在显示内容的前面加上c说明符来设置控制台的内容。