Javascript 不会更改属性值

Question

我正在使用 IE 并使用 Visual Studio 创建 Web 表单。

我正在尝试更改我创建的吐司样式的值。

toast html 取自这里：http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar

我的html代码：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">

<link rel="stylesheet" href="/Styles/snakebar.css" type="text/css" />


<style type="text/css">
    #s3 {
        display: none;
    }

    .s {
        display: none;
    }

    .s2 {
        display: compact;
    }
</style>

<button onclick="myFunction()">CLICKER</button>
<div id="snackbar" class="show">
    Some text some message..
   <%-- <asp:Label runat="server" Text="Some text some message.."></asp:Label>--%>



<script>

    function myFunction() {

        var x = document.getElementById("snackbar");
        if (x != null) {

            if (document.getElementById("snackbar").style.visibility == "hidden") {

                try {
                    document.getElementById("snackbar").style.visibility = "hidden";
                    // document.getElementById("snackbar").className.replace("show", "s");
                    // document.getElementById("snackbar").className.value = "s3";
                }
                catch (ex) {
                    alert(ex);
                }
            } else {
                document.getElementById("snackbar").style.visibility = "visible";
                document.getElementById("snackbar").className.value = "show";
                window.onload = function () {

                    document.getElementById("snackbar").style.visibility = "visible";
                }
            }

        }
    }
</script>

当我按下按钮时，我总是在 style.visible 中得到“”，而不是“可见”或隐藏。 有任何想法吗？谢谢！

Answer 1

我认为你是打算这样做的：

window.onload = function() {
  document.getElementById("snackbar").style.visibility = "visible";

  document.getElementById("but").onclick = function() {
    var x = document.getElementById("snackbar");
    if (x != null) {
      var vis = x.style.visibility;
      x.style.visibility = vis == "" || vis == "visible" ? "hidden" : "visible"
    }
  }
}

<button id="but" type="button">CLICKER</button>
<div id="snackbar" class="show">
  Some text some message..
</div>