Question

我创建了一个默认情况下element1.style.display='none'的页面。现在我有另一个元素element2，点击后会显示element1。但是在尝试将element1设置为设置element1.style.display="block"的函数时，它会给出一个错误，指出element1为空。我理解这是因为默认为display=none。

我该如何解决这个问题？这是使用javascript而不是jquery。

var hash = location.hash; 
alert(hash); 

function init() { 
    if( hash == '#menu-a' || hash == '' ) { 
        document.getElementById('menu-a').style.display = 'block';
    } 
    else if( hash == '#menu-b' ) { 
        document.getElementById('menu-b').style.display = 'block'; 
    }
    else { 
        document.getElementById('menu-c').style.display = 'block'; 
    } 
} 

window.onload=init;

Answer 1

据我所知，这是因为默认情况下display = none

没有。这是因为没有为变量分配任何内容。

我猜你期待一个id="element1"的元素自动创建一个名为element1的JavaScript变量 - 它不应该。

document.getElementById('element1').style.display = 'block';

Answer 2

如果隐藏元素的顺序始终相同，您可以尝试使用getElementsByTagName（“”）[arrayindex]访问它。

Answer 3

在dom准备好之前有没有机会触发javascript？在您想要访问它的那一刻，dom树中是否存在element1？

Answer 4

初始化display:block后，您应立即执行element，然后在初始化后立即将其恢复为display:none。

Answer 5

我实际上遇到了类似的问题：并非所有浏览器都以同样的方式对display:none（或至少是他们的孩子）处理元素。我有一些SVG对象放在两个DIV中，我想显示一个或另一个。在初始化期间，我对SVG元素进行一些操作（更改SVG中的一些文本元素）。这与Firefox完美配合，但在Opera，Chrome和IE上都失败了。在这些浏览器中，使用display:none的div内的元素在尝试使用document.getElementById(myID)获取时会产生null结果。第一个解决方法是仅在初始化之后设置display:none属性（这有效），但是当我想再次显示它们时，所有初始化都丢失了（文本标签都是默认值）。我认为这证明了具有display:none的DIV的内容以某种方式从DOM中清除，而不是简单地隐藏。我还尝试使用visibility:hidden而不是display:none，但这对页面布局造成了很大的麻烦。似乎在所有浏览器上工作的唯一解决方案是（到目前为止）将我想要隐藏的DIV放在“{space}”中，如it is suggested here...

position: absolute;
top: -9999px;
left: -9999px;

Answer 6

我认为即使在html页面中生成该元素，您也要更改该元素的样式。当您尝试访问网页中的某个元素时，如果该元素在该时间点的页面中不可用，则返回Null 我的建议是在完全加载这些元素后运行该javascript部分，使用onclick，onload等属性...

空元素javascript与display：none

6 个答案: