js判断img为空时，div隐藏

最新推荐文章于 2023-11-09 10:11:15 发布

原创最新推荐文章于 2023-11-09 10:11:15 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

html css

4 篇文章

订阅专栏

该博客主要围绕使用JavaScript实现当img元素为空时隐藏div元素展开，涉及前端页面元素状态判断与显示控制的信息技术内容。

js判断img为空时，div隐藏


 
 第一种方式：js中案例
<script>
window,onload=function(){
var imgs=document.getElementsByTagName('img');
for(var i=0,j=imgs.length;i<j;i++){
(imgs[i].onerror=function(){
imgs[i].style.display='none';
})(); //注意这里的写法。形如(function(){...})()，这是js里的一种特殊写法，很有效。
}
}
</script>
<img src="">
<img src="http://www.baidu.com/1.jpg">
<img src="http://www.baidu.com/2.jpg">
<IMG src="http://www.baidu.com/3.jpg">


 第二种方式：jquer中案例  需要引用一个jquery.js

<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>

<div class="pic">
<ul>
<li><img src="img/pic.png"></li>
<li><img src="">路径为空，隐藏此li标签</li>
<li><img src="">路径为空，隐藏此li标签</li>
<li><img src="img/pic1.png"></li>
</ul>
</div>

<script>
$(".pic li").each(function(){
    var src = $(this).find("img").attr("src");    //获取图片路径
    if(src == ""){
        $(this).hide();
    }
});
</script>


 </body>
</html>