通过display或visibility来实现HTML元素的显示与隐藏-html教程-PHP中文网

通过display或visibility来实现HTML元素的显示与隐藏

不言

发布： 2018-05-08 14:45:00

原创

2465人浏览过

这篇文章主要介绍了关于通过display或visibility来实现html元素的显示与隐藏，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本文

有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：

复制代码

代码如下:

<html> 
<head> 
<title>HTML元素的显示与隐藏控制</title> 
<script type="text/javascript"> 
function showAndHidden1(){ 
var p1=document.getElementById("p1"); 
var p2=document.getElementById("p2"); 
if(p1.style.display=='block') p1.style.display='none'; 
else p1.style.display='block'; 
if(p2.style.display=='block') p2.style.display='none'; 
else p2.style.display='block'; 
} 
function showAndHidden2(){ 
var p3=document.getElementById("p3"); 
var p4=document.getElementById("p4"); 
if(p3.style.visibility=='visible') p3.style.visibility='hidden'; 
else p3.style.visibility='visible'; 
if(p4.style.visibility=='visible') p4.style.visibility='hidden'; 
else p4.style.visibility='visible'; 
} 
</script> 
</head> 
<body> 
<p>display：元素的位置不被占用</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2024">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679986468670.png" alt="畅图">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2024">畅图</a>
                            <p>AI可视化工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="畅图">
                                <span>179</span>
                            </div>
                        </div>
                        <a href="/ai/2024" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="畅图">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 
<p id="p1" style="display:block;">p 1</p> 
<p id="p2" style="display:none;">p 2</p> 
<input type="button" onclick="showAndHidden1();" value="p切换" /> 
<hr> 
<p>visibility：元素的位置仍被占用</p> 
<p id="p3" style="visibility:visible;">p 3</p> 
<p id="p4" style="visibility:hidden;">p 4</p> 
<input type="button" onclick="showAndHidden2();" value="p切换" /> 
</body> 
</html>

登录后复制

以上就是通过display或visibility来实现HTML元素的显示与隐藏的详细内容，更多请关注php中文网其它相关文章！