Question

为了在动作后更改图片的z-index，我在js中编写以下代码。

$("id").click(function{

     document.getElementsByClassName.style.zIndex = 2;
});

然而，它显示错误如

js Uncaught TypeError：无法设置未定义的属性'zIndex'

有没有人面临同样的问题并解决了它？ THX

Answer 1

也可以使用jquery

完成

$(".class_name").css("z-index","2");

Answer 2

这应该有效：

您只需要提供一个类名并迭代元素：

$("id").click(function{
   var elems = document.getElementsByClassName("some_class");

   for(var i = 0; i < elems.length; i++) {
      elems[i].style.zIndex = 2;
    }
});

Answer 3

首先，getElementsByClassName需要传递给它的参数，以指定要接收的元素应包含的类名。

只需选择返回数组中的第一个并对该值进行操作，请务必检查返回的数组是否包含任何元素：

$("id").click(function{
 var elements = document.getElementsByClassName('some-class-name');
 if (elements.length > 0) {
  elements[0].style.zIndex = 2;
 }

});

但我真的建议你使用jQuery来确保跨浏览器的兼容性。

$("id").click(function{
 var elements = $('.some-class-name');
 if (elements.length > 0) {
  elements.first().css({ 'z-index' : 2 });
 }

});

编辑：因为你说，你想要改变一个图像对象的zIndex，我在jQuery中使用first（）而在vanilla JS中使用[0]来仅对第一个元素进行操作。但只需使用唯一的id属性作为标识符，在这种情况下只能查询一个元素。

Answer 4

您需要为getElementsByClassName提供参数。请参阅documentation。

Answer 5

您在函数中缺少参数，如果使用getElementsByClassName，则元素采用数组格式，因此您还需要指定元素位置[0]，或者在循环中执行此操作。这是你正在运行的例子。

＆＃13;

$("#test").click(function(){
document.getElementById("test").style.zIndex = 0;
document.getElementsByClassName("testClass")[0].style.zIndex = 999;
});

$(".testClass").click(function(){
document.getElementsByClassName("testClass")[0].style.zIndex = 0;  
document.getElementById("test").style.zIndex = 999;
});

＆＃13;

#test{
  position:absolute;
  width:100%;
  height:100%;
  background-color:red;
  z-index:999;
  }

.testClass{
  position:absolute;
  width:100%;
  height:100%;
  background-color:green;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"> Test
  </div>

<div class="testClass">Test Class</div>

＆＃13;

Answer 6

据我所知，正如我们所知，Javascript中的ID对于特定元素是唯一的，但是在类的情况下它不是。类是可重用的。

为了使用课程，请具体说明您将要使用的课程。

以下是我的代码，可帮助我解决问题。

funtion displayModal(){
     var play_button_overlay = document.getElementsByClassName("play_button")[0];
     play_button_overlay.style.zIndex="1";
    }

“js Uncaught TypeError：无法设置未定义的属性'zIndex'”

6 个答案: