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

writing to element.style.visibility has no effect on page ( same IDs have different addresses? )

本文关键字：ID 地址 visibility style element 有影响 写入      更新时间：2023-09-26

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

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

但就输出到页面而言，没有任何影响（元素不可见）。

// 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';
    }
};

元素不可见

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

  1. 它有一个不可见的祖先元素（visibility: hidden或display: none）

  2. 它有display: none.

  3. 它不在页面上。（或者至少，它在任何可见的盒子之外;如果它的父代或其他祖先overflow: hidden并且它位于该父级/祖先的尺寸之外......

    4. 它

  4. 没有尺寸（例如，宽度和高度均为零），所以它是可见的，你只是看不到它。

  5. 迈克尔·萨佐诺夫指出，它的父母（或其他祖先）可能有opacity: 0 .（或者元素本身可以有它。

至于你的最后一条评论 - 这解释了一切。一旦你使用getElementById - 浏览器通过它的ID检索一个元素，但将其引用为DOM对象。因此，在抓取元素后，ID 不再有意义。删除 DOM 元素后 - 浏览器会丢失其引用，因此您需要再次抓取它（通过您找到的最佳方法）。关于innerHTML - 如果您不想一次又一次地跟踪和抓取每个 DOM 元素 - 您最好不要通过 innerHTML 重写。更好地使用element.appensChild()功能。它将元素添加到父元素，而不重写其innerHTML。

相关文章：