javascript - 写入 element.style.visibility 对页面没有影响(相同的 ID 有不同的地址？)

Question

我当然验证了该元素存在。

我什至已经验证您可以读取该元素值。

但就输出到页面而言，没有任何效果(元素不可见)。

// debug verificatoin
alert('debug on: domMenu.drop_down_element.style.visibility: ' + domMenu.drop_down_element.style.visibility );

// write action 
domMenu.drop_down_element.style.visibility = 'visible';

这是代码...它在第一次运行时有效..但是之后失败..我相信这是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';
    }
};

Answer 1

the element does not become visible

除非您向我们展示您的标记和 CSS，我唯一能想到的是:

1. 它有一个不可见的祖先元素(visibility: hide 或 display: none)

2. 它有显示:无。

3. 它不在页面上。 (或者至少，它位于任何可见框之外；如果它的父级或其他祖先具有 overflow:hidden 并且它位于该父级/祖先的尺寸之外......)

4. 它没有尺寸(例如，宽度和高度均为零)，因此它是可见的，但您只是看不到它。

5. Michael Sazonov 指出其父代(或其他祖先)可能具有 opacity: 0。 (或者元素本身也可以拥有它。)