美化你的console,为它添加样式

news/2024/7/19 16:42:38 标签: js, css, javascript, 前端

美化你的console,为它添加样式

需求:

输出带有样式的consloe,例如
在这里插入图片描述

实现:

javascript">console.log('%c version %c 1.0.0 ',
    'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
    'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff')

总结:

  1. 给console添加样式需要用到%c占位符,
    每一个%c对应一个其后传入的样式,
    %c指令前的文本不会受到影响,但指令后的文本将会使用参数中声明的 CSS 样式。

  2. 控制台信息的默认行为与行内元素相似。为了应用 padding, margin 这类效果,你应当这样设置display: inline-block.。

  3. 可用属性如下:

  • 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

http://www.niftyadmin.cn/n/1355231.html

相关文章

登录python自动化_python自动化实现验证码登录过程

(自动化实现验证码登录,这里内容是入坑后,整合了几个文档的内容)| 以下模块是使用时需要用到的首先:安装pillow库,它的作用是对图片进行简单的处理,在pytharm中使用pip install pillow指令即可安…

box-reflect应用

box-reflect应用 语法 box-reflect&#xff1a;none(无倒影) | <direction> <offset> <mask-box-image> <direction> above | below | left | right&#xff08;倒影方向&#xff0c;上、下、左、右&#xff09; <offset> <length> …

python redis命令zadd_一日一技:【重要】redis-py最新版本zadd方法参数有变

在Python中操作Redis数据库&#xff0c;我们一般使用的第三方库为redis-py。 在redis-py 3.0之前&#xff0c;如果我需要添加一个有序集合的值&#xff0c;我是这样写的代码&#xff1a;import redis client redis.Redis() client.zadd(key, value1, score1, value2, score2) …

char强制类型转换为int_软件特攻队|static_cast,C++强制类型转换操作符

C中总共有四个强制类型转换操作符&#xff1a;reinterpert_cast、static_cast、const_cast、dynamic_cast。强制类型转换&#xff0c;也称为显式转换&#xff0c;接下来我们讲讲static_cast这个强制类型转换操作符。编译器隐式执行的任何类型转换都可以由static_cast来完成&…

火狐浏览器兼容鼠标滚轮事件

火狐浏览器兼容鼠标滚轮事件 起因&#xff1a; this.$refs.canvasDivBox.addEventListener(mousewheel, this.zoomInOrOut, false); 这段代码在chrome中运行正常&#xff0c;但是到firefox中时则不会被触发。 原因&#xff1a; firefox不支持mousewheel&#xff0c;请使用…

js和python交互_python和js能交互吗

广告关闭 腾讯云11.11云上盛惠 &#xff0c;精选热门产品助力上云&#xff0c;云服务器首年88元起&#xff0c;买的越多返的越多&#xff0c;最高返5000元&#xff01; 对于表单提交&#xff0c;后台可以用srequest.form.get(username,none)来捕捉前端网页的值。 但是如果是非表…

微信小程序Toast在ios上的兼容性问题

微信小程序Toast在ios上的兼容性问题 表现 微信小程序和uni的Toast&#xff0c;弹出纯文本提示消息的时候有一个兼容问题&#xff0c;只展示两行。 在ios上的最大宽度比安卓小&#xff0c;当文字过多的时候会展示不全。 原因 微信小程序对Toast进行了字数限制&#xff0c;最…

电路原理笔记整理_数控笔记:机床维修人必备八大技能之三

机床维修人必备八大技能【数控笔记】主要分享交流FANUC、Brother、三菱、新代等各类数控维修知识&#xff1b;微信公众号已创建1.7年&#xff0c;得到了好多数控人的大力支持&#xff0c;现有粉丝近15000人。该公众号之前发布的文章&#xff0c;基本都是直奔主题 技术分享 很少…