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

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

display:none以后,元素相当于已经不存在了,如果你有针对该元素的js代码,肯定无法获取到对象,自然代码就会失效。
display:none与visibility:hidden不同,前者表示元素已经不在文档流中,不占据任何位置,而后者只是隐藏,元素依然在文档流中,占据着位置。
温馨提示:内容为网友见解,仅供参考
第1个回答  2013-08-16
  我知道的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不能动了,只能看不会播放图片

追答

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

追问

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

本回答被提问者和网友采纳
第2个回答  2013-08-16
CSS只影响显示样式,不会影响js行为,在检查一下js代码吧
第3个回答  2020-12-23

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

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

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

CSS中定义了display:none,js怎么把它显示出来,不仅是Block
如果是通过样式文件或css方式来设置元素的display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题

html代码中使用了CSS代码:display:none,js控制显示和隐藏的。火狐显示正...
可以看出来,你用的是jquery, jquery游览器方面兼容做的很好,所以问题不太可能出现在 ("#pics-nav .up_page").show();("#pics-nav .up_page").hide();这一块,很有可能是出现在pic_c_page这一块值判断的问题上.

【js调用display:none失效的问题】
JS不在文档流,隐藏JS不代表隐藏了JS生成的HTML。你要看统计代码最后生成的HTML是什么,如果有样式,就在你的CSS里面重定义样式为 display就行了

这个是哪里错了。css让display:none重新显示失败了
你这种场景不适合用display:none来隐藏元素,因为隐藏了就相当于消失了,鼠标移到上面是没有任何反应的。要用visibility:hidden:首先,你应该把这些select都放到一个div里,比如: 场合 ...其他略然后css中这样:.selbox select {visibility:hidden}.selbox:hover select {visibility:...

display none是什么意思?display none的用法示例
1、如果是通过样式文件或css方式来设置元素的display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题 。2、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏...

css3 display none 到 display block 有过渡效果没
display:none说是会使浏览器重绘,在display:none到display:block中先执行了transform里的动作,最后才显示display:block的,原因就是W3C渲染就是这样的。希望我理解的正确,有更好解释可以多多指教吧!特殊的:在js中如果个给display:none加个延时 也是可以出现动画效果的 ...

jquery div属性为display:none js取值问题
DIV 是没有VALUE这个属性的 取值就用 .HTML() 是取DIV里面包括HTML代码的 只取文字 .TEXT()

关于js控制display:none的问题
方法1:使用jquery的toggle切换函数login$("#login").toggle( function () { $(this).show(); }, function () { $(this).hide(); });方法2:原始方法设置全局标记位var flag = false;if(flag){ login.style.display="block"; flag=false;}else{ login.style.display="non...

谁能帮我解释一下Dreamweaver中的CSS的display属性的none、block、inline...
display:inline 主要用在横排列表的时候,因为默认的每个会占一行,转化为内敛元素,就会横排了display:none 主要用在做tab选项卡的时候,将不显示的部分隐藏,配合JS代码使用display:bock 将内联元素转化为块级元素。内联元素在宽度足够的情况下是横向一个个显示,块及元素是每个占一行显示。

相似回答