![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础
不停留
这个作者很懒,什么都没留下…
展开
-
重排与重绘
重排与重绘什么是重排其他触发重排的操作什么是重绘什么是重排当我们的操作引发了DOM的几何变化,比如修改某个元素的宽高,显示隐藏属性等,在浏览器中,因为这个DOM元素发生变化而影响到其他元素,浏览器需要重新计算元素的几何属性,然后将计算的结果绘制出来,这个过程就是重排(也叫回流)。重排,多数情况下是由于元素几何属性变化引起的。当发生重排时,浏览器的工作过程如下其他触发重排的操作1.改变DOM结构,比如说节点的移动、增删等。2.获取特定的属性值,如offsetTop、offsetLeft、原创 2021-10-11 15:15:34 · 216 阅读 · 0 评论 -
js如何最有效的判断图片类型
在做图片上传功能的时候,虽然大多数业务情况下都是支持所有图片格式。但是也会遇到一些规定图片格式的情况,尤其是在为了防止又恶意文件的情况下,因为每个图片都是二进制流,所以判断图片应该按头信息判断。相同格式的图片,有着相同的制式。png是前八个jgp是前两个和后两个gif是前六个判断是否为png图片async is_png(file){ const ret = await(this.blobToStrng(file.slice(0,8))) const png= ret = '89 50 4E 0原创 2020-09-14 11:15:37 · 3727 阅读 · 2 评论 -
IE11中img标签不显示图片
IE11中img标签不显示图片在做一个页面的时候img标签中直接采用路径方式引用本地图片,在chrome中显示完好,然而在ie浏览器中出现显示不全的问题如下图:在做一个页面的时候img标签中直接采用路径方式引用本地图片,在chrome中显示完好,然而在ie浏览器中出现显示不全的问题如下图:多番调试之后发现是因为使用flex布局的原因,当注释掉flex,马上正常显示究其原因是因为flex布局下 img标签中的图片出现了变形。可以通过给img设置flex-shrink: 0解决此外,还可以用div原创 2020-09-14 10:18:30 · 1662 阅读 · 0 评论 -
grid常用设置
父元素1.dispaly: grid | inline-grid | subgrid;grid: 生成块级网格inline-grid: 生成行内网格subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小2.grid-template-columns 行大小grid-template-rows 列大小3.单元格间距grid-column-...原创 2019-09-18 16:47:05 · 2804 阅读 · 0 评论 -
JS常用数据处理方法总结
JS常用数据处理方法总结1、树形数据转换后台返回到前台所有的数据时,根据需求,通过parentId,数据ID将数据转换为树形数据进行渲染。/* * 树形数据转换 * @param {*} data * @param {*} id * @param {*} pid */export function treeDataTranslate(data, id = 'id', pid = ...原创 2019-09-18 16:44:35 · 631 阅读 · 0 评论 -
span标签中英文换行
在span内加上style属性word-break:break-all;原创 2019-10-23 15:35:59 · 1486 阅读 · 0 评论 -
canvas与svg的区别
canvas与svg的区别CanvasSVGcanvas和svg都允许在浏览器中创建图形,但他们在根本上是不同的Canvas1. canvas通过javascript来绘制2D图形。2. canvas是逐个像素进行渲染。3. 在canvas中,图形绘制完成后,它就不会继续得到浏览器的关注。如果位置、大小等发生变化,那么整个canvas场景也需要重新绘制,根据变化不同,会产生一定程度的重排或重绘。4. canvas绘制的图片依赖分辨率,能够以.png .jpg格式保存存储图像5. canvas不原创 2021-10-11 14:43:39 · 601 阅读 · 0 评论