Question

为什么css中添加了display:none其它js代码会失效？

为什么css中添加了display:none其它的js代码会失效？
我大概知道了，我是用display:none隐藏了一个DIV，那个DIV是用来banner播放图片，由JS控制，我让banner在一打开网页时是隐藏的，所以加了display:none，但显示出来的却不能播放图片，大概是要用display:block来解决，

Answer 1

display：none以后，元素相当于已经不存在了，如果你有针对该元素的js代码，肯定无法获取到对象，自然代码就会失效。
display：none与visibility：hidden不同，前者表示元素已经不在文档流中，不占据任何位置，而后者只是隐藏，元素依然在文档流中，占据着位置。

Answer 2

　　我知道的display:none或visibility:hidden对js的影响是
　　js获取父元素的innerHTML或innerText或outerHTML时会直接跳过隐藏元素，除非你直接获取隐藏元素本身。

追问

document.getElementById("DIV的ID").style.display="none";//隐藏
document.getElementById("DIV的ID").style.display="block";//显示
这其中一句怎么引用？ - -。。。

追答

比如给隐藏元素设id，通过id直接操作，或者用 getElementsByClassName()，getElementsByTagName，getElementById()，.children[]等的方法，总之就是直接获取隐藏元素可以读取，但是获取父元素的innerText等是不显示的，我之前写一个js程序时也是出现问题，还找不到原因，后来查到innerText没法得到隐藏元素内的文本，后来在执行函数前先把元素display=""; 执行好后再display="none"才解决的。

你可以用body的onLoad=""来引用。

追问

我现在解决了用上面那两句来显示和隐藏div，但是我想让这个div在载入网页时是隐藏的，所以在这个div的css中加了display=none这一句，这样便实现了一开始就是隐藏的（这个DIV是有JS代码控制播放的）；但是显示出来后这个DIV不能动了，只能看不会播放图片

追答

能说一下播放部分的代码吗？能显示就应该能操作。

追问

我已经摸索出来了- -。。谢谢你的回答

Answer 3

CSS只影响显示样式，不会影响js行为，在检查一下js代码吧

Answer 4

Vue实践-CSS样式position/display/float属性对比使用

Answer 5

visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为"hidden"的时候，就不能再接收响应到事件了
另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。
当display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。）