使用JavaScript中的display属性显示或隐藏HTML中的元素的方法

最新推荐文章于 2024-07-25 02:11:29 发布

cumubi7453

最新推荐文章于 2024-07-25 02:11:29 发布

阅读量1.6k

点赞数

文章标签： css js html jquery vue ViewUI

原文链接：https://www.includehelp.com/code-snippets/method-to-show-or-hide-elements-in-html-using-display-property-in-javascript.aspx

版权

In HTML, we can use the display property to selectively show and hide elements. In this tutorial, we'll see how...

在HTML中，我们可以使用display属性来选择性地显示和隐藏元素。在本教程中，我们将看到如何...

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</head>
<style>
    body {
        background: burlywood;
    }
</style>

<body>
    <div class="container center">
        <h4>Here's a new year party you'll never forget!</h2>

    <div class="row">
        <div class="col">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">Tuesday, 31st December 2019</span>
              <p>New Year's Eve Plans!</p>
              <span>Short party hosted at my place, be sure to come and don't forget to wear your dancing shoes! :)</span>
            </div>
            <div class="schedule white-text">
                    <h5>Schedule is as follows</h5>
                    <p>5pm Snacks</p>
                    <p>6pm Resolution making</p>
                    <p>7pm Musical chairs, dog in the bone and other fun games!</p>
                    <p>9pm Dinner</p>
                    <p>10 pm Karoke</p>
                    <p>11pm 2019: an overview and let the countdown begin!</p>
            </div>

            <div class="card-action">
              <button class="btn">RSVP</button>
              <button class="btn hide-btn">Hide Schedule</button>
            </div>
          </div>
        </div>
      </div>
   </div>
</body>
<script>

</script>
</html>

Output

输出量

Now that we have a template setup let's try to hide the schedule on clicking the button. We can attach an event listener and set the display property to none. First, we need a reference to both our schedule as well as our button.

现在我们有了模板设置，让我们尝试单击按钮隐藏时间表。我们可以附加一个事件侦听器，并将display属性设置为none 。首先，我们需要同时参考我们的时间表和按钮。

const schedule = document.querySelector('.schedule');
const hideBtn = document.querySelector('.hide-btn');

Now let's add an event listener to set the display of our schedule as none.

现在，让我们添加一个事件侦听器，以将日程表的显示设置为无。

<script>
    const schedule=document.querySelector('.schedule');
    const hideBtn=document.querySelector('.hide-btn');
    hideBtn.addEventListener('click',()=>{
        schedule.style.display="none";
    })
</script>

Output

输出量

You can see that on clicking the hide schedule button we are able to successfully hide the schedule! Great. You can see that on clicking the hide schedule button we are able to successfully hide the schedule! Great.

您会看到单击“隐藏时间表”按钮，我们就可以成功隐藏时间表！大。您会看到单击“隐藏时间表”按钮，我们就可以成功隐藏时间表！大。

Let's try to do this the other way. After we have clicked the hide schedule button we'll change the text to show schedule and then if the user clicks it we'll get the schedule back again.

让我们尝试以其他方式执行此操作。单击“隐藏时间表”按钮后，我们将更改文本以显示时间表，然后，如果用户单击它，我们将重新获得时间表。

<script>
    const schedule=document.querySelector('.schedule');
    const hideBtn=document.querySelector('.hide-btn');
    hideBtn.addEventListener('click',()=>{
        schedule.style.display="none";
        hideBtn.textContent="Show Schedule";
    })
</script>

Output

输出量

You can see now the button's text has changed! But how do we get the schedule back? We can set the display property to block but how do we know when to do that? A simple way would be to check if the button says hide or show.

您现在可以看到按钮的文本已更改！ 但是，我们如何重新获得时间表？我们可以将display属性设置为block，但是我们如何知道何时执行此操作？一种简单的方法是检查按钮是否显示“隐藏”或“显示”。

<script>
    var showSchedule=new Boolean();
    const schedule=document.querySelector('.schedule');
    const hideBtn=document.querySelector('.hide-btn');

    hideBtn.addEventListener('click',()=>{
        if(hideBtn.textContent=="Hide Schedule")
        showSchedule=false;
        else
        showSchedule=true;

        if(showSchedule){
        schedule.style.display="block";
        hideBtn.textContent="Hide Schedule";
        }
        else{
        schedule.style.display="none";
        hideBtn.textContent="Show Schedule";
        }
    })
</script>

Output

输出量

Now when you click show schedule, the button changes its text and you can see the schedule back again!

现在，当您单击显示时间表时，该按钮将更改其文本，您可以再次看到时间表！

In this way, we can easily use the display property in HTML to hide or show elements selectively based on certain events.

这样，我们可以轻松地使用HTML中的display属性来基于某些事件选择性地隐藏或显示元素。

翻译自: https://www.includehelp.com/code-snippets/method-to-show-or-hide-elements-in-html-using-display-property-in-javascript.aspx

cumubi7453

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript中的display属性显示或隐藏HTML中的元素的方法

In HTML, we can use the display property to selectively show and hide elements. In this tutorial, we'll see how... 在HTML中，我们可以使用display属性来选择性地显示和隐藏元素。在本教程中，我们将看到如何... <html lang="en"><...
复制链接

扫一扫