javascript如何实现图片隐藏？

更新日期: 2019-11-26阅读: 2.8k标签: 图片分享

复制链接

新浪微博

QQ 好友

扫一扫分享

javascript中可以通过将图片display属性设置为none实现图片隐藏。display属性设置元素如何显示，其语法为Object.style.display=value。

JavaScript中实现通过点击显示隐藏图片代码：

把图片的display设为none，触发点击事件时，display变为block

<style>
    img {
        width: 400px;height: 300px;
        display: none;  //设置图片隐藏
    }
</style>
<body>
    <input id = "btn" type="button" value="clickme">
    <img src="images/1.jpg" id="pic"> 
    
    <script>
    var btn = document.getElementById("btn");
    var pic = document.getElementById("pic");
    btn.onclick= function (){
        pic.style.display = "block";
    }
    </script>

display属性：

display属性设置元素如何显示。

Object.style.display=value

值与描述：

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact 此元素会根据上下文作为块级元素或内联元素显示。
marker
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>

链接: https://fly63.com/article/detial/7867

javascript如何实现图片隐藏？

原生Js对文件类型的判断，判断文件是图片，视频等格式

前端图片懒加载的实现，采用Lazy Load 图片延迟加载提高用户体验

web前端图片加载优化，从图片模糊到清晰的实现过程

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

js实现图片局部放大效果

网站图片优化的重要性与技巧方案

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

原生js 生成海报图_利用canvas合成图片的实现方法

网页中默认图片的几种解决方式

h5移动端禁止长按图片保存