Javascript不会更改属性值

时间:2017-02-11 14:01:15

标签: javascript c# html asp.net

我正在使用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>

当我按下按钮时,我总是在风格中看到“”而不是“可见”或隐藏。 有任何想法吗?谢谢!

1 个答案:

答案 0 :(得分:1)

我认为你打算这样做:

&#13;
&#13;
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"
    }
  }
}
&#13;
<button id="but" type="button">CLICKER</button>
<div id="snackbar" class="show">
  Some text some message..
</div>
&#13;
&#13;
&#13;