console.log添加样式及图片
console.log在控制台打出css样式的文字及图片
谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档
Format | Specifier |
---|---|
%s | Formats the value as a string. |
%d or %i | Formats the value as an integer. |
%f | Formats the value as a floating point value. |
%o | Formats the value as an expandable DOM element (as in the Elements panel). |
%O | Formats the value as an expandable JavaScript object. |
%c | Formats the output string according to CSS styles you provide. |
可以看到,通过占位符%c
,可以对输出到console控制台的文字进行CSS控制。
格式如下:
console.log("%c需要输出的信息 ", "css 代码");
输出3D TEXT
|
|
彩色背景文字
|
|
文字颜色
|
|
设置不同的css
|
|
在Chrome控制台输出图片
|
|
参考资料
https://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html
console.log添加样式及图片的更多相关文章
- console.log 加样式
console.log("%c%s", "color: black; font-size: 18px;", "test")
- JS之console.log详解以及兄弟姐们邻居方法扩展
console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...
- console.log()显示图片以及为文字加样式
有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...
- 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- 有趣的console.log(console.log输出彩色字,图片等)
亲们支持我的新博客哦==>原文地址 ) 逛网站的时候经常发现很多网站控制台打印了很好玩的内容 比如我的网站 →calamus 或者知乎→ 平时是不是只用console调试或者打印别的信息了,没有 ...
- 等不及要告诉你的一件事-console.log可以指定样式
今天看`简书`文章,习惯性的打开了开发者工具,于是发现了意见有意思的事,在console面板,发现了如下的日志: ??? 这 ... 有点意思. 如果上面的图片,不能引起你的兴趣,那么你可以再看看这个 ...
- 用css改变console.log的输出样式
console.log允许你通过css来格式化输出,格式如下: console.log('%c字符串[%c字符串]', 样式1, [样式2]) 其中"%c"为模板字符串 例子: 1 ...
- 改变console.log的输出样式
console.log允许你通过css来格式化输出,格式如下: console.log(‘%c字符串%c字符串’, 样式1, [样式2]) 其中”%c”为模板字符串 例子: 1 console.log ...
- VSCode添加 console.log 快捷键
file - preferences - keyboard shortcuts - keybindings.json: 添加: { "key": "ctrl+ ...
随机推荐
- Java--Json解析
普通Json {"code":"S0000", "describe":"数据正常返回", "result&qu ...
- 线性齐次递推式快速求第n项 学习笔记
定义 若数列 \(\{a_i\}\) 满足 \(a_n=\sum_{i=1}^kf_i \times a_{n-i}\) ,则该数列为 k 阶齐次线性递推数列 可以利用多项式的知识做到 \(O(k\l ...
- IT运维体系
- 5)PHP,可变变量
所谓可变变量,就是一个变量的名,又是一个变量. 可变变量的语法是php的很特殊的语法——其他语言中少见. $v1 = “abc”; //这是一个字符串变量,其内容是字符串“abc” $abc = ; ...
- 吴裕雄--天生自然 PYTHON3开发学习:SMTP发送邮件
import smtplib smtpObj = smtplib.SMTP( [host [, port [, local_hostname]]] ) SMTP.sendmail(from_addr, ...
- TextBox换行C#文本框换行.net文本框换行textarea换行
在TextBox中输入的内容,显示的时候如果用lable显示,无法换行 可以使用TextBox输入,然后也使用TextBox 显示,这样换行输入的内容,显示的时候也可以换行.显示的时候可以设置一下控件 ...
- 图遍历算法的应用(包括输出长度为l的路径最短最长路径)
判断从顶点u到v是否有路径 void ExistPath(AdjGraph* G, int u, int v, bool& has) { int w; ArcNode* p; visit[u] ...
- 【Java杂货铺】JVM#Java高墙之GC与内存分配策略
Java与C++之间有一堵由内存动态分配和垃圾回收技术所围成的"高墙",墙外的人想进去,墙外的人想出来.--<深入理解Java虚拟机> 前言 上一章看了高墙的一半,接下 ...
- centos 7 安装及配置vsftpd
一.防火墙开放21端口 二.创建FTP用户,创建完用户后在/etc/passwd里是这样呈现的:ftpuser:x:1008:1008::/var/www/html:/sbin/nologin 三.y ...
- JSP中request对象常用方法汇总
setAttribute(String name,Object):设置名字为name的request的参数值 getAttribute(String name):返回由name指定的属性值 getAt ...