就如千千万万javascript学者一样,我遇到了同样的问题:Uncaught TypeError: Cannot read property 'display' of undefined
但我的情况更加特殊,在网上查询同样问题的解决方案之后,我发现没有一个和我类似,都无法解决我的问题。
对,我只能一个个调试,删删改改,终于找到了答案。
1.我定义样式的节点用的是class,用getElementsByClassName来获取
var turn = document.getElementsByClassName("turn");
2.但是class是一类元素集合,是一个数组,返回的是class的所有元素,这时我修改样式的时候依然用obj.style,就出现了读不到属性的情况
picture.style.display = "none"
3.解决方案:将class用id替代是最简单的修改方案
将html的节点标签改成id,css、js文件相应更改,用getElementById来获取属性即可
var turn = document.getElementById("turn");
小结:
getElementByClassName
这个方法并不是返回指定的一个元素而是一类元素,即所有class为你设定的class名称的元素,所以它的返回结果应该是一个数组,那么你要改变样式就需要从数组中取到元素,再针对元素来设置属性,而不是直接数组设置属性,这样自然会无效。
使用方法(getElement s ByClassName不要漏掉了s,后边要用【0】指定数组元素):
1 |
|
以下是方法解释;
getElementById() 方法返回带有指定 ID 的元素:【返回元素】
getElementsByTagName() 返回带有指定标签名的所有元素。【返回元素集合,即数组】
getElementsByClassName() 方法
最后的最后:本文小结部分为转载,侵删。原文https://www.imooc.com/qadetail/230436