更改可见性后，背景颜色不适用

Background color doesn't apply after changing visibility

本文关键字：背景 颜色 不适用 可见性      更新时间：2023-09-26

更改容器ul标签的可见性后，粉红色背景色消失。代码如下。我错过了什么吗？为什么 li 不继承 ul 标签的背景色？

<style type="text/css">
.div_r3r4_container { width:760px; background-color:lightblue; } 
.div_r3_class     {  margin-left:132px; width:630px;  }
.ul_r3hz_class  { background-color:pink; font-size:0px; padding:2px 2px 1px 3px;list-style:none;margin:0;        }
.li_r3hz_class  { font-size:14px; color:black; display:inline;   }
.ul_r4hz_class {background-color:yellow; font-size:0px; border:1px solid red; padding:1px 2px 2px 3px;list-style:none;margin:0; }
.li_r4hz_class {font-size:14px; color:green; display:inline; }
</style>

<div  id="div_r3_r4_id" class="div_r3r4_container"> 
    <label id="city"> hide and show ul    </label> 
    <div  class="div_r3_class" >  
        <ul class="ul_r3hz_class" id="sid" >
           <li  class="li_r3hz_class"> aaaa, aaaa1, aaa2, aaa3,      </li> 
           <li  class="li_r3hz_class"> aaaaa4, aaaa5,  aaaa5,  aaa6,    </li>   
       </ul>
    </div>        
      <div  class="div_r4_class" >  
        <ul class="ul_r4hz_class"  >
           <li  class="li_r4hz_class"> bb, bbb, bbbb, bbbb2, bbbb3    </li> 
           <li  class="li_r4hz_class"> bbbb5, bbb6, bbb7, bbb8,    </li>   
       </ul>
    </div>        
</div>  

<div>
<input id="minus" value="-" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="hide_show_div('sid', 'minus', 'plus' ); return flase; ">
<input id="plus" value="+" type="submit" style="background-color:white; float:right; font-size:6px;" onClick="show_hide_div('sid', 'minus','plus','div_r3_class' ); return flase; ">
</div>

<script language = "JavaScript">   
function hide_show_div( hideid1, hideid2, showid1 ){
    hideObjDiv( hideid1 ) ; 
    hideObjDiv( hideid2 ) ; 
    showObjDiv( showid1 ) ; 
}
function show_hide_div( showdivid1, showid2, hideid1, newclass ){
    hideObjDiv( hideid1 ) ; 
    showObjDiv( showid2 ) ; 
    showObjDiv( showdivid1 ) ; 
}
function hideObjDiv(obj) {
    if (document.getElementById) { 
        document.getElementById(obj).style.visibility = 'hidden';
        document.getElementById(obj).style.display = 'none';
    }
}
function showObjDiv(obj) {
    if (document.getElementById) { 
        document.getElementById(obj).style.visibility = 'visible';
        document.getElementById(obj).style.display = 'inline';
    } 
} 
</script>

我发现你的javascript代码有问题。如您所知，默认情况下应该阻止无序列表标签，并且您正在尝试将其内联到您的 js 代码中（隐藏后）。只需尝试将 showObjDiv 函数更改为如下所示：

function showObjDiv(obj) {
    if (document.getElementById) { 
        document.getElementById(obj).style.visibility = 'visible';
        document.getElementById(obj).style.display = 'block';
    } 
}

在那之后它应该可以正常工作。

设置可见性：隐藏和显示：无之间存在差异。 当您设置显示：无时，元素将从流程中完全删除，并且此元素及其所有属性和样式将被删除。如果 obj 元素有 css 类 *div_r3_class*，那么（为了简单起见，我使用了 jQuery）：

function showObjDiv(obj) {
    if (document.getElementById) { 
        document.getElementById(obj).style.visibility = 'visible';
        document.getElementById(obj).style.display = 'inline';
        $("#"+obj).addClass('div_r3_class');
    }

这样，在重新显示元素后，指定的类将附加到该元素。

相关文章：