学累了？进来玩一玩 console.log 吧!

用户9999906

发布于 2022-09-26 11:42:57

3280

发布于 2022-09-26 11:42:57

文章被收录于专栏：学编程的GISer

玩一玩console.log样式

前几天看到有人在浏览器的控制台打印出来了具有css样式的文字，感觉还挺好玩的，然后我自己也去试了一下😁，确实可以打印出来，其实很简单，这里分享给大家：

打印一个天蓝色的 “Hello word！”：

代码：

console.log(
  '%cHello word!',
  'color:skyblue;font-size:20px;font-weight:700'
);

其实整理一下打印的格式，就是：

console.log('%c内容','css样式')

只要在内容前加一个%c就好，很简单吧哈哈。当然你也可以使用模板字面量，让打印的值不固定：

欢迎关注“学编程的GISer”! 嘻嘻

代码：

<body>
  <div>学编程的GISer</div>
  <script>
    const a = document.getElementsByTagName('div')[0].innerHTML;
    console.log(
      `%c${JSON.stringify(a)}`,
      'color:skyblue;font-size:20px;font-weight:1000;text-shadow:1px 1px 0;background-color:yellow'
    );
  </script>
</body>

再来试一下console.log图片：

(大潘本人哈哈)

代码：

console.log(
  '%cdemo',
  `
   font-size: 10px;
   padding: 100px 100px;
   background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   color: transparent;
   `
);

这里的打印图片其实是打印出来的背景图片，需要%c后边必须要有一点内容来撑开这个‘“盒子”，否则图片会显示不出来。

是不是很简单？只要会一点css就ok

最后，你可以尝试一下打印出来很多好看的样式，比如：

Hello! I am Dapan!

快去自己动手试一下吧！

灵感来源：

https://www.toutiao.com/article/7111494803468141097/?only_rec=1&share_token=9b0d5ede-cc2b-4a35-9be0-334566c55c4c&source=m_redirect&wid=1657008207246

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-07-07，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自学编程的GISer 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度