“js未捕获类型错误:无法设置未定义的属性‘zIndex’”

In order to change z-index of a picture after a action,I write the following code in js.

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

$("id").click(function{

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

however,it show the error like

但是，它显示了类似的错误

js Uncaught TypeError: Cannot set property 'zIndex' of undefined

js未捕获的TypeError:不能设置未定义的属性“zIndex”

is there anyone face the same problem and has solved it? THX

有没有人面临同样的问题并已经解决?谢谢

6 个解决方案

#1

First getElementsByClassName requires an argument passed to it, to specify which class name the elements should contain, you want to receive.

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

Just pick the first one of the returned array and operate on that value, be sure to check if the returned array contains any elements:

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

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

});

But I really would suggest you to use jQuery to ensure cross browser compatibility.

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

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

});

EDIT: Because you said, you want to change the zIndex of ONE image object, I use first() in jQuery and [0] in vanilla JS to get operate on the first element, only. But just use an unique id attribute as identifier to query only one element in this case.

编辑:因为您说过要更改一个图像对象的zIndex，所以我在jQuery中使用first()，在普通JS中使用[0]对第一个元素进行操作。但是在这种情况下，只需使用唯一的id属性作为标识符来查询一个元素。

#2

it can also be done with jquery

它也可以用jquery完成。

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

#3

This should work:

这应该工作:

All you need is to provide a class name and iterate over elements:

您只需要提供一个类名并对元素进行迭代:

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

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

#4

You need to provide arguments to getElementsByClassName. See the documentation.

您需要向getElementsByClassName提供参数。见文档。

#5

You was missing parameter in function and elements are in array format if you use getElementsByClassName so you also need to specify elements position [0], or do this in loop. Here is your running example.

如果您使用getElementsByClassName，那么您在函数和元素中缺少参数，因此您还需要指定元素位置[0]，或者在循环中执行。这是您的运行示例。

$("#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;
});

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

.testClass{
  position:absolute;
  width:100%;
  height:100%;
  background-color:green;
  }

<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>

#6

According to me, as we know ID's in Javascript are unique to particular element but and in case of classes it is not. Classes are reuseable.

在我看来，我们知道Javascript中的ID对于特定元素是唯一的，但是对于类来说则不是。类是可重用的。

For to use class be specific which occurence of class your are going to use.

对于要使用类，请指定要使用的类的发生时间。

Below is my code which help me to resolve my issue.

下面是帮助我解决问题的代码。

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

#1