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

-3

为了在动作之后更改图片的z-index，我在js中编写了以下代码。“js Uncaught TypeError：无法设置未定义的属性'zIndex'

$("id").click(function{ 

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

但是，它表明类似

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

误差有任何人面临同样的问题又解决了吗？ THX

来源

2016-08-13 shinyMao

提及**类名**然后迭代应用。例如： - document.getElementsByClassName（“some_class”）;'给出元素数组 – Abhi

'.getElementsByClassName'方法没有'style'属性。 – melpomene

是的，我忘了打印它。 – shinyMao

第一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和[0]香草JS只得到第一个元素进行操作。但是，在这种情况下，仅使用唯一的id属性作为标识符来查询仅一个元素。

来源

2016-08-13 07:05:30

你好，你能告诉我为什么使用jQuery可以确保交叉浏览器兼容性？ THX – shinyMao

查看[jQuery当前浏览器的桌面和移动支持]（http://jquery.com/browser-support/）取自[This SO answer]（http://stackoverflow.com/questions/6384707/is-使用-jQuery的一个担保换跨浏览器兼容性＃6384757） –

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

来源

2016-08-13 06:55:41 Karin

也可以用jQuery做

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

来源

2016-08-13 07:03:05

您的答案可能是对的，但您使用的** jQuery **未在问题 – Abhi

中标记但问题代码本身包含** jQuery **，这就是为什么我回答 –

添加了jQuery标记。请为您的答案增加一点解释。 – Abhi

这应该工作：

所有你需要的是提供一个类名和遍历元素：

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

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

来源

2016-08-13 07:03:06 Abhi

如果您使用的是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>

来源

2016-08-13 07:08:00 C2486

据我，因为我们知道的ID在Javascript中是独一无二的特定的元素，但在类案件事实并非如此。类是可重用的。

对于使用的类是具体哪些类的发生将要使用。

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

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

来源

2018-01-12 05:44:02 aiffin

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

回答

相关问题