前端开发那些不常见但十分有效的小玩意
同学们在开发功能的时候可能会遇到这样那样的问题，但可能手中没有什么好的解决办法，那么不妨来看看小千下面介绍的几个代码，说不准就有能够解决你问题的哦。
console.table()
思考一下平时在开发过程中, 我们的代码中出现频率比较高的一段代码是什么 console.log(‘xxx’)，因为各种各样的原因, 我们的代码一旦在浏览器运行总是各种 红色 所以很多小伙伴会选择在控制台打印一下看看。看看我遍历的是个啥，看看我获取的元素是个啥，看看我请求回来的东西是个啥，看看我算的数是不是 NaN。
但是遇到类似下面这样的代码
在控制台打印出来的可能不是我们想要的
如果只有一两个属性, 那么没啥问题, 我不用打开就能看到结果 但是一旦对象中属性变得多了, 那么我们展开以后看到的结果就会误导我的代码了 这个时候, 我们可以选择使用 console.table() 来进行控制台展示
contenteditable
我们在页面上写的大部分标签都是不可以编辑的 但是一旦你给元素加上 contenteditable 属性以后, 就变成可以编辑的了。这个玩意有啥用呢, 也保存不下来, 刷新以后还是和以前一样 可以帮我们玩一下 css 样式的问题 我们可以写一个内联样式, 写在 body 标签里面。
calc()
我们再写 css 的时候, 经常会遇到一个小问题 就是我已经写了宽度 25% 了 然后发现, 你 ** 竟然有 margin 好吧, 我给你加一个 margin: 0 10px。
好吧, 我认命了, 不写 25% 了, 拉个计算器过来, 我算数还不行吗 （1）归零 … 归零 … 归零 …
我们也可以选择使用一个 calc()
li { width: calc(25% - 20px); }
轻松解决问题。
本文来自千锋教育，转载请注明出处
前端开发那些不常见但十分有效的小玩意相关推荐
- 参数构造错误 微信_快速掌握前端开发中的常见错误
前言 今天我们来了解一下现在浏览器中支持的一些Error对象,如果你还在经常在捕获到错误的时候不知道该用哪个类型,总是习惯于去throw new Error('xx')的话,相信本文会帮你对error ...
- 码匠编程：学习Web前端开发时有哪些技术点
现在学前端的人是越来越多,学习质量也是参差不齐.过来人的身份告诉你,如果你还没有下定决心花时间去学习Web前端,那也可以先找些视频学习下,Web前端开发有哪些常见技术点!接下来,就看看Web前端开发有 ...
- “前端开发中的三种定时任务及其应用“
前端定时任务是指在一定时间间隔内,自动执行指定的操作或函数.在前端开发中,定时任务被广泛应用于诸如数据更新.定时提醒.定时刷新页面等方面.在本文中,我们将介绍前端中常见的三种定时任务,分别是 setT ...
- 什么是前端开发领域的 Page Blink 和 Page Flicker
我做了一段时间的 Angular 之后,听到同事们处理 Github issue 时,偶尔会提到 Page Blink 这个名词. 例如这个: 可以看出如果一个 Angular 应用缺乏 ngrx s ...
- anguler 画面布局适应屏幕大小_前端开发常见的五大布局模式，绝对不要错过这篇分享！...
点击上方蓝字关注我哦前端五大常见布局 前端5种常见布局方式 作为前端开发工程师,布局方式有多种,对于不同的场景可以使用不同的布局方式,但是很多刚参加工作的同学对于这些不是很了解,那么我们就先来简单的来 ...
- 前端开发常见的缩写词中英文对照
趁着周末总结一下我们作为前端开发人员,需要掌握的一些缩写的词,这次总结的都是概念中的内容,不包括流行的框架,库等的名词. 关于框架和库的名词介绍,欢迎关注我后续的更新. AJAX ==[Asynchr ...
- 前端开发中常见的浏览器兼容性问题及解决方案
文章目录 前言 一.浏览器四大内核 二.主流兼容问题 (一)浏览器引擎 (二)兼容问题的原因 (三) 为什么浏览器会存在兼容性问题? (四)处理兼容问题的思路 1. 要不要做? 2. 做到什么程度? ...
- 计算机专业类型 前端,什么是前端开发以及常见岗位类型
随着互联网的不断发展,web前端开发成为了又一大热门的求职发展方向,而今天我们就通过案例分析来了解一下,什么是前端开发以及常见岗位类型. 什么是前端开发? 前端开发主要涉及网站和App,用户能够从Ap ...
- 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效，收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...
最新文章
- unity 2d摄像机类型_Unity使用笔记2——功能介绍
- Python数据类型（列表和元组）
- 一些常规形几何形状的绘制和效果填充(二）
- 用Windows Live Writer 2012发博客
- 案例研究设计与方法-罗伯_旭进口重新设计-用户体验案例研究
- Python List reverse()方法
- 这届毕业生薪资高，是真的
- 认识Windows Communication Foundation
- Flutter 权限申请
- python turtle工具箱_python 库之 turtle(图形绘制) 开启新的快乐源泉
- 2019西北工业大学程序设计创新实践基地春季选拔赛(重现赛)
- 活动目录的安装:深入浅出Active Directory系列(二)
- 基于Nextcloud，挂载Google drive，搭建Aria2+AriaNg，实现在线下载BT磁链/在线观看/全功能文件管理/无限容量云盘
- mysql怎么读取数据，面试建议
- CentOS 压缩解压
- 不是python文件操作的相关函数_从零开始学Python(七):文件存储I/O流和异常捕捉
- 关于网盘等图标出现在设备和驱动器的情况
- Python 安装wheel.whl文件
- 燃气轮机发电系统matlab仿真模型,基于MATLAB的微型燃气轮机发电系统的建模及仿真.doc...
- Win10系统修改时间设置