Question

我正在尝试更改我的网站主标头，具体取决于它是否在开发QA或生产中托管。这是html：

<div id="wrapper">
  <form id="form1" runat="server">
   <div class="wrapper">
    <div>
      <div id="siteHeader" runat="server">FTP Forms</div>
      ...other stuff
    <div>
    <div class="wrapper">
        <asp:ContentPlaceHolder id="MainContent" runat="server">

        </asp:ContentPlaceHolder>                     
    </div>
   </div>
  </form>
</div>

我的.css文件中的相关css，我在没有#siteHeader的情况下尝试了这个。

#siteHeader.header {
    background-color: forestgreen;
    color: white;
    font-size: 24pt;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px solid #000;
}

#siteHeader.headerQa {
    background-color: yellow;
    color: white;
    font-size: 24pt !important; // I tried important to no avail...
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px solid #000;    
}

siteHeader.headerPrd {
    background-color: red;
    color: white;
    font-size: 24pt;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px solid #000;
}

以下是我尝试过的事情。 CodeBehind Site.Master.cs，我在Page_load，Pre_Init和master_Page_PreLoad中尝试了这个，它可以在我的localhost和dev上运行但不是QA，我没有尝试使用Prod，原因很明显。此外，innerText应该更改，但不是CSS。

    string hostName = Request.ServerVariables["Server_Name"];

    if (hostName.ToUpper().Contains("DEV") || hostName.ToUpper().Contains("LOCALHOST)) // tested on local like this for each if statement.
    {
        siteHeader.InnerText = "FTP Forms -Development";
        siteHeader.Attributes["class"] = "header";
        Page.Title = "FTP Dev";
    }
    else if (hostName.ToUpper().Contains("STAGE") || hostName.ToUpper().Contains("LOCALHOST"))
    {
        siteHeader.InnerText = "FTP Forms - QA";
        siteHeader.Attributes["class"] = "headerQa";
        Page.Title = "FTP QA";
    }
    else
    {
        siteHeader.InnerText = "FTP Forms - Production";
        siteHeader.Attributes["class"] = "headerPrd";
        Page.Title = "FTP Prod";
    }

我也试过在JavaScript中做出评论并在JavaScript中进行操作，这也改变了内部文本而不是CSS。我甚至尝试过使用内联风格也无济于事。这在我的localhost或服务器上不起作用。在LocalHost上else应该生效

<script type="text/javascript">
    var hostName = location.hostname;
    if (hostName.indexOf("dev") > -1) {
        document.getElementById("siteHeader").className = "header";
        document.getElementById("siteHeader").innerText = "FTP - Forms Development";
    } else if (hostName.indexOf("stage") > -1) {
        document.getElementById("siteHeader").className = "headerQA";
        document.getElementById("siteHeader").innerText = "FTP - Forms QA"
    } else  {
        document.getElementById("siteHeader").style = "background-color: red; color: white; font-size: 24pt; font-weight: bold; padding: 5px; border-bottom: 1px solid #000;";
        document.getElementById("siteHeader").innerText = "FTP - Forms Production"
    }
</script>

Answer 1

我的应用程序的解决方案是覆盖Site.Master.cs中的Page.Render()方法。

protected override void Render(HtmlTextWriter writer)
{
    string hostName = Request.ServerVariables["Server_Name"];

    if (hostName.ToUpper().Contains("DEV")) // tested on local like this for each if statement.
    {
        siteHeader.InnerText = "FTP Forms -Development";
        siteHeader.Attributes["class"] = "header";
        Page.Title = "FTP Dev";
    }
    else if (hostName.ToUpper().Contains("STAGE") || hostName.ToUpper().Contains("LOCALHOST"))
    {
        siteHeader.InnerText = "FTP Forms - QA";
        siteHeader.Attributes["class"] = "headerQa";
        Page.Title = "FTP QA";
    }
    else
    {
        siteHeader.InnerText = "FTP Forms - Production";
        siteHeader.Attributes["class"] = "headerPrd";
        Page.Title = "FTP Prod";
    }
    base.Render(writer);
}

根据主机名更改div css

1 个答案: