专栏首页地方网络工作室的专栏javascript 寻找当前页面中最大的 z-index 值的方法

javascript 寻找当前页面中最大的 z-index 值的方法

javascript 寻找当前页面中最大的 z-index 值的方法

我们在写类似 toast 这样的组件的时候,会希望我们的弹出层在当前页面的最上层,也就是说,希望 z-index 值为最大。所以,我们需要找到当前页面中最大的 z-index 值,然后把这个值 +1 即可。

我们先来想一想思路。

我们可以把 DOM 中的所有元素集合起来,然后转化成一个数组,然后我们遍历这个数组,把所有元素的 z-index 值提取出来,然后就形成了一个纯数字的数组,最后从中取到最大值,就是当前页面中的最大的 z-index 值了。

好,将我们的思路,转化为代码,我们一个一个来解决。

将思路转化为代码

找到所有的元素,转化为数组

方法1:

Array.from(document.querySelectorAll('body *'))

我们用 querySelectorAll 形成的是一个类数组结构,但不是数组,不支持数组方法。因此,使用 Array.from 方法,将它转化为真正的数组。

方法2:

Array.from(document.body.querySelectorAll('*'))

嗯,没什么区别,但是这样比上面好看一点。从性能上,要比第一种要强一点点。

方法3:

[...document.body.querySelectorAll('*')]

用 ES6 方法,将类数组转化为数组。

方法4:

[...document.all]

body 中寻找,和从全部中寻找,性能差异几乎没差,关键是,代码好看了许多。就酱紫。

查找元素的 Z-INDEX 值

下面示例中 __DOM__ 为伪代码,指 dom 元素。

方法1(错误示范):

__DOM__.style.zIndex

嗯,这样只能找到行内样式中的 z-index 值,如果是写在 css 文件中的,那么就找不到了。

所以,这是一个错误的示范。

方法2:

我们要找到元素的真实 css 属性,就必须使用 window.getComputedStyle() 方法。

window.getComputedStyle(__DOM__).zIndex

这样,我们就可以拿到元素的 z-index 值了。但是问题是,我们拿到的不一定是一个数字,而可能是 auto 这样的字符串值,我们就需要处理一下了。

逻辑非常简单,就是将这个值转化为数字,如果是 NaN 就覆盖为 0 ,否则,就给原值即可。

// 正常写法
Number(window.getComputedStyle(__DOM__).zIndex) || 0

// 简写写法
+window.getComputedStyle(__DOM__).zIndex || 0

数组中寻找最大值

这个没什么难度了。

方法1:

Math.max.apply(null, arr)

这个是一贯的寻找最大值的方法。

方法2:

Math.max(...arr)

其实和第一种一样,不过是 ES6 的写法罢了。

方法3:

arr.reduce((num1, num2) => {
    return num1 > num2 ? num1 : num2}
)

reduce 方法是一个比较高级的方法,它会把数组序号 0 的值和数组序号 1 的值用自定义的函数进行计算,然后将返回的结果,和数组序号 3 的值再次进行自定义函数的计算,直到数组里的每一个值都计算完成。

上面的代码就是一个简单的对比函数。

至于其他 for 循环,以及排序方法就不赘述了。

好,两个本质问题解决,下面我们来组装代码。

查找当前页面 z-index 最大值实现代码

方法1

var arr = [...document.all].map(e => +window.getComputedStyle(e).zIndex || 0)
return arr.length ? Math.max(...arr) : 0

如上,我们轻松的实现了效果。

这里需要注意的是,Math.max() 方法如果对一个空数组进行处理,是会出错的,所以上面进行了一个数组长度判断,来避免出错。

方法2

前面用的方法,是我们之前的设想的思路,我感觉这个思路是大多数人都可以想到的。

但是这个方法,先整了一个数组,然后再在数组里面寻找最大值,我感觉这个运算量还是比较大的,我就想,可以不可以用更轻的运算,来实现这个功能。

我们来看一下,上面说的,我们从一组数组中寻找最大值的方法的方法3,reduce() 方法。我们是不是可以直接进行运算呢?说干就干,代码如下:

return [...document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0)

我们知道,如果是空数组的话,用 reduce 是会出错的,所以,我们需要加上一个默认的计算值—— 0 。如下图所示:

initialValue可选 用作第一个调用 callback 的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

这样,就可以避免为空的时候的错误了。

document.all 在获取元素类数组的时候,即便为空页面,也是可以得到非空的数组的。但是,我们写代码,一定要考虑异常状况。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 构建不重复特殊数组

    原理非常简单,set 里面是不能有重复内容的。所以先转成 set 再转成 list 即可实现去重。

    FungLeo
  • React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • Mac 10.13 安装中文版 man 命令

    Mac 10.13 安装中文版 man 命令 本文参考于 《Mac 安装man命令中文文档》,但原文提供的链接以及安装的版本比较老旧。因此重新整理新版在这边提供...

    FungLeo
  • Java基础笔记05

    dreamkong
  • 窥探Swift之数组安全索引与数组切片

      今天是元宵节,祝大家元宵节快乐!在Swift中的数组和字典中下标是非常常见的,数组可以通过索引下标进行元素的查询,字典可以通过键下标来获取相应的值。在使用数...

    lizelu
  • 阶段01Java基础day05JAVA数组

    声明:本文为原创,作者为 对弈,转载时请保留本声明及附带文章链接:http://www.duiyi.xyz/c%e5%ae%9e%e7%8e%b0%e9%9b%...

    对弈
  • lodash源码解析——chunk函数

    最近在研究算法,本来这一章打算写狄克斯特拉算法的JavaScript实现,但是遇到了一个地方一直想不明白怎么写,于是就打算放松一下,毕竟公司的切图任务也挺重的,...

    前端博客 : alili.tech
  • Java——数组的定义与使用(基本概念、引用分析、初始化方式、二维数组、对象数组)

    数组指的是一组相关变量的集合。Java中,数组属于引用数据类型,所以必然牵扯到内存的关系。对于数组的定义格式包括:

    Winter_world
  • Python扩展库numpy中where()函数的三种用法

    第二种用法:给where()函数传递一个包含True/False值的数组,返回该数组中True值的下标,结合numpy数组的关系运算,可以返回数组中符合特定条件...

    Python小屋屋主
  • 数组:为什么很多编程语言中数组都从0开始编号?

    数组(Array)是一种线性表数据结构。它用一组连续的内存空间,来存储一组具有相同类型的数据。

    Jingbin

扫码关注云+社区

领取腾讯云代金券