Javascript 写入element.style.visibility对页面没有影响（相同的ID有不同的地址？）

我当然验证了元素的存在

我甚至验证了你可以读取元素值

但是对于页面的输出没有任何影响（元素不可见）

这是代码…它在第一次运行时工作..但之后失败..这是javaScript中的一个逻辑问题…我相信…这是旧代码..并且有一种奇怪的风格

var domMenu = 
{
    TIME_DELAY:             1000,
    time_out_id:            0,
    drop_down_element:      0,
    top_mouse_over:  function ( id ) 
    {
        if( !domMenu.drop_down_element )
        {
            domMenu.drop_down_element = document.getElementById( 'wrap_drop_down_new' );
            domMenu.top_element = document.getElementById( 'top_new' );
        }
        clearTimeout( domMenu.time_out_id );
        domMenu.show_menu();
    },
    bottom_mouse_over: function() 
    {
        clearTimeout( domMenu.time_out_id );
    },
    mouse_out: function()
    {
        domMenu.time_out_id = setTimeout( domMenu.hide_menu, domMenu.TIME_DELAY );
    },
    hide_menu:function()
    {
        domMenu.drop_down_element.style.visibility = 'hidden';
        domMenu.top_element.style.border = '1px solid #faf7f7';
    },
    show_menu:function()
    {    
alert('debug on: domMenu.drop_down_element.style.visibility: ' + domMenu.drop_down_element.style.visibility );
        domMenu.drop_down_element.style.visibility = 'visible';
        domMenu.top_element.style.border = '1px solid #cfcaca';
        domMenu.top_element.style.borderBottom = '3px solid #cfcaca';
    }
};

回答

这是状态的问题，所以我一直在拉菜单元素。这是对一个我不理解的问题的破解

var domMenu = 
{
    TIME_DELAY:             1000,
    time_out_id:            0,
    drop_down_element:      0,
    top_mouse_over:  function ( id ) 
    {
        domMenu.drop_down_element = document.getElementById( 'wrap_drop_down_new' );
        domMenu.top_element = document.getElementById( 'top_new' );

        clearTimeout( domMenu.time_out_id );
        domMenu.show_menu();
    },
    bottom_mouse_over: function() 
    {
        clearTimeout( domMenu.time_out_id );
    },
    mouse_out: function()
    {
        domMenu.time_out_id = setTimeout( domMenu.hide_menu, domMenu.TIME_DELAY );
    },
    hide_menu:function()
    {
        domMenu.drop_down_element.style.visibility = 'hidden';
        domMenu.top_element.style.border = '1px solid #faf7f7';
    },
    show_menu:function()
    {    
        // alert('debug on: domMenu.drop_down_element.style.visibility: ' + domMenu.drop_down_element.style.visibility );
        domMenu.drop_down_element.style.visibility = 'visible';
        domMenu.top_element.style.border = '1px solid #cfcaca';
        domMenu.top_element.style.borderBottom = '3px solid #cfcaca';
    }
};

元素不可见

除非您向我们展示您的标记和CSS，否则我能想到的只有：

它有一个不可见的祖先元素（要么

可见性：隐藏

要么

显示：无

）

它有

显示：无

这不在这一页上。（或者至少，它位于任何可见框之外；如果其父级或其他祖先具有

溢出：隐藏
，并且它位于该父级/祖先的维度之外……）

它没有尺寸（例如，宽度和高度都为零），所以它是可见的，你就是看不见

Michael Sazonov指出，它的父代（或其他祖先）可能具有

opacity:0

。（或者元素本身可以拥有它。）

---

至于你最后的评论——这解释了一切。使用

getElementById

后，浏览器将根据元素的ID检索元素，但将其引用为DOM对象。因此，在抓取元素之后，ID就不再有意义了。一旦删除了DOM元素，浏览器就会失去它的引用，所以您需要再次获取它（通过任何您认为最好的方法）。关于

innerHTML

-如果不想一次又一次地跟踪和获取每个DOM元素，最好不要通过

innerHTML

重写。最好使用

element.appensChild（）

函数。它将元素添加到父元素，而不重写其

innerHTML

您在使用什么？铬合金，其他软金属？再详细一点，不要看你的标记和CSS，很难帮助你解决这个问题。我已经给出了一些选项，但实际上，您需要更详细。很抱歉，缺少信息…这是一个逻辑问题。我现在发布代码…它可以在重新加载时工作…但不能在之后。是第一次之后失败的可见性属性，还是整个脚本？它每次都会抛出警报吗？我只是删除了if语句…我不知道这里发生了什么…我只是去了一个0重新加载的站点..纯ajax..这是最后一个问题…我通过删除if语句修复了这个问题…我不知道这为什么修复了这个问题，也不知道我如何猜测这是一个“状态”通过反复抓取静态id可以解决这个问题……我将重新发布答案。多亏了运气。另外，如果父元素不透明度为0，我相信这是javascript中的一个逻辑问题，因为它在第一次运行时工作……但不是在……我已经在上面发布了……感谢您提供的信息。还有…再次为缺乏信息感到抱歉…我不知道问题是什么，也不知道该发布什么。

var domMenu = 
{
    TIME_DELAY:             1000,
    time_out_id:            0,
    drop_down_element:      0,
    top_mouse_over:  function ( id ) 
    {
        domMenu.drop_down_element = document.getElementById( 'wrap_drop_down_new' );
        domMenu.top_element = document.getElementById( 'top_new' );

        clearTimeout( domMenu.time_out_id );
        domMenu.show_menu();
    },
    bottom_mouse_over: function() 
    {
        clearTimeout( domMenu.time_out_id );
    },
    mouse_out: function()
    {
        domMenu.time_out_id = setTimeout( domMenu.hide_menu, domMenu.TIME_DELAY );
    },
    hide_menu:function()
    {
        domMenu.drop_down_element.style.visibility = 'hidden';
        domMenu.top_element.style.border = '1px solid #faf7f7';
    },
    show_menu:function()
    {    
        // alert('debug on: domMenu.drop_down_element.style.visibility: ' + domMenu.drop_down_element.style.visibility );
        domMenu.drop_down_element.style.visibility = 'visible';
        domMenu.top_element.style.border = '1px solid #cfcaca';
        domMenu.top_element.style.borderBottom = '3px solid #cfcaca';
    }
};