zoukankan      html  css  js  c++  java
  • javascript如何实现图片隐藏?

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

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

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

    <style>
        img {
             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>

    广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com

    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>

  • 相关阅读:
    Ftp、Ftps与Sftp之间的区别
    Previous Workflow Versions in Nintex Workflow
    Span<T>
    .NET Core 2.0及.NET Standard 2.0 Description
    Announcing Windows Template Studio in UWP
    安装.Net Standard 2.0, Impressive
    SQL 给视图赋权限
    Visual Studio for Mac中的ASP.NET Core
    How the Microsoft Bot Framework Changed Where My Friends and I Eat: Part 1
    用于Azure功能的Visual Studio 2017工具
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/14085768.html
Copyright © 2011-2022 走看看