在JavaScript中如何修改元素的z-index值

本文链接：https://blog.csdn.net/lixin5456985/article/details/143808235

在 JavaScript 中，修改元素的 z-index 值是通过操作元素的 style 属性来实现的。z-index 控制元素在页面中的堆叠顺序，数值较大的元素会覆盖数值较小的元素。

修改 `z-index` 的步骤：

选择元素：首先，使用 DOM 方法选择要修改的元素。你可以使用 document.getElementById()、document.querySelector()、document.querySelectorAll() 等方法来获取元素。
修改 z-index 值：通过元素的 style 属性访问并修改 z-index 值。

示例代码：

示例 1：通过 ID 修改 `z-index` 值

假设 HTML 中有如下元素：

<div id="box1" style="width: 100px; height: 100px; background-color: red; position: absolute; z-index: 10;">Box 1</div>
<div id="box2" style="width: 100px; height: 100px; background-color: blue; position: absolute; z-index: 5;">Box 2</div>

你可以使用 JavaScript 修改 z-index：

// 选择元素
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");

// 修改 z-index
box1.style.zIndex = "20";  // 将 box1 的 z-index 改为 20
box2.style.zIndex = "1";   // 将 box2 的 z-index 改为 1

解释：

box1.style.zIndex = "20"：将 box1 的 z-index 设置为 20，使它位于 box2 之上。
box2.style.zIndex = "1"：将 box2 的 z-index 设置为 1，使它位于 box1 之下。

注意：

只有 position 设置为 relative、absolute、fixed 或 sticky 的元素才会影响 z-index，static 定位的元素不会受 z-index 的影响。

示例 2：通过类名修改 `z-index` 值

你也可以通过类名来选择元素并修改它们的 z-index 值。

<div class="box" style="width: 100px; height: 100px; background-color: red; position: absolute; z-index: 10;">Box 1</div>
<div class="box" style="width: 100px; height: 100px; background-color: blue; position: absolute; z-index: 5;">Box 2</div>

// 选择所有 class 为 box 的元素
var boxes = document.querySelectorAll(".box");

// 修改第一个和第二个元素的 z-index
boxes[0].style.zIndex = "30";  // 将第一个 box 的 z-index 改为 30
boxes[1].style.zIndex = "5";   // 将第二个 box 的 z-index 改为 5

示例 3：动态修改 `z-index` 值

你也可以通过事件动态修改元素的 z-index。例如，当用户点击某个元素时，将该元素的 z-index 提升到最上层：

<div id="box1" style="width: 100px; height: 100px; background-color: red; position: absolute; z-index: 10;">Box 1</div>
<div id="box2" style="width: 100px; height: 100px; background-color: blue; position: absolute; z-index: 5;">Box 2</div>

<button onclick="bringToFront()">Bring Box 1 to Front</button>

function bringToFront() {
  var box1 = document.getElementById("box1");
  box1.style.zIndex = "100";  // 将 box1 的 z-index 提升到 100
}

解释：

当按钮被点击时，bringToFront 函数会执行，将 box1 的 z-index 设置为 100，使它显示在所有其他元素之上。

总结

操作元素的 style.zIndex 属性：通过 JavaScript 可以直接修改元素的 z-index，从而控制元素的堆叠顺序。
z-index 只对定位元素有效：元素的 position 属性必须设置为 relative、absolute、fixed 或 sticky 才能生效。
可以动态修改 z-index：通过事件或交互动态修改 z-index 来实现层级变化。