display从隐藏到显示,原有样式丢失

 时间:2024-10-23 11:47:22

1、原有页面设置两个div,一个默认显示,一个默认隐藏,用style= “display:none”进行控制,同时class样式设置了宽度。

display从隐藏到显示,原有样式丢失

2、这里我们看到页面显示组织类的选择框正常大小,但是切换到自然人时,选择框变得莫名很小。

display从隐藏到显示,原有样式丢失
display从隐藏到显示,原有样式丢失

3、这里我们看一下JS处理的方法是,根据选择 组织类还是自然人进行 两个div的显示与否

display从隐藏到显示,原有样式丢失

4、查找了一下原因,原因就是display不仅会让元素内容不可见,同时元素所占的空间也会消失,但同样控制元素是否可见的visibility,设置为 hidden能不能满足我们的需要呢? 我们看一下代码和切换效果

display从隐藏到显示,原有样式丢失
display从隐藏到显示,原有样式丢失
display从隐藏到显示,原有样式丢失

5、这里我们看到,visibility 虽然没有改变样式,但是不可见的时候空间也在,这样切换到自然人时,选择框下移,也不符合我们的要求,那么,我们仍要用display:none的方式实现,在设置隐藏和显示时,将第一次要隐藏的元素宽度设置好就可以了,代码和效果如下

display从隐藏到显示,原有样式丢失
display从隐藏到显示,原有样式丢失
display从隐藏到显示,原有样式丢失
  • Intellij IDEA的代码提示功能怎么打开
  • win10怎么关闭任务栏搜索框动画提示?
  • 在Eclipse中如何查找文件
  • Sublime怎么打开txt文本文件
  • eclipse中设置tomcat热部署
  • 热门搜索
    初中英语手抄报版面 二年级上册手抄报 关于科技的手抄报图片 阳光体育手抄报内容 数学手抄报大全 名胜古迹手抄报 生活中的数学手抄报 小学四年级数学手抄报 热爱祖国手抄报内容 消防手抄报内容