如何通过js将styles下的Z-index=9600设置更大_IT百科

document.getElementById('domId').style.zIndex = 9600

大多数css样式，都可以通过dom.style.css来获取或设置它的值，其中css就是类似于zIndex等属性。而且有一个特点，就是css属性中，凡事中线+字母的，都要把中线+字母换成该字母的大写，比如上面的z-index就要换成zIndex，font-size就要换成fontSize等等。

<style>

.box {display:flexmargin:100px 100px}

.box img {position:relativeheight:200pxtransition:all 0.5sz-index:1box-shadow:0 0 1px #000}

</style>

</div>

$(function(){

$(".box img").click(function(){

$(".box img").css({"transform":"scale(1,1)","z-index":"1","box-shadow":"0 0 1px #000"})

$(this).css({"transform":"scale(1.6,1.6)","z-index":"3","box-shadow":"0 0 10px #000"})

if($(this).prev())$(this).prev().css({"transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000"})

if($(this).next())$(this).next().css({"transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000"})

})

</script>

需要引用jquery

设置style 中 z-index:auto

auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。

若定义为-1，代表为最底层。

div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。

·测试效果：

<!DOCTYPE html>

<html>

<head>

<title>div图层样式</title>

<style>

.div-relative{position:relativecolor:#000border:1px solid #000width:500pxheight:400px}

.div-a{ position:absoluteleft:30pxtop:30pxbackground:#F00width:200pxheight:100px}

/* css注释说明：背景为红色 */

.div-b{ position:absoluteleft:50pxtop:60pxbackground:#FF0width:400pxheight:200px}

/* 背景为黄色 */

.div-c{ position:absoluteleft:80pxtop:80pxbackground:#00Fwidth:300pxheight:300px}

/* DIV背景颜色为蓝色 */

</style>

</head>

<body>

<div class="div-a">我背景为红色</div>

<div class="div-b">我背景为黄色</div>

<div class="div-c">我背景为蓝色</div>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

如何通过js将styles下的Z-index=9600设置更大