根据主机名更改 div css答案

【问题标题】：Change div css based on hostname根据主机名更改 div css
【发布时间】：2016-03-03 16:22:22
【问题描述】：

我正在尝试更改我的站点主标题，具体取决于它是托管在开发 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 中进行，这也改变了内部文本，但没有改变 CSS。我什至尝试过一次使其内联样式也无济于事。这在我的本地主机或服务器上不起作用。在 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>

【问题讨论】：

您可能想要完全改变路线并使用特定于环境的 web.configs：stackoverflow.com/questions/305447/…
我已经有单独的连接字符串配置，你是说使用不同的 site.master 并用 web.config 指定它吗？或者有没有办法从 web.config 定位特定的 html 元素？
您可以使用 AppSettings 来存储您的标题类和文本值。
我不确定如何应用您的建议。类似<appSettings> <add key="devHeader" value="myCssSettingsHere" /> </appSettings>
然后使用 web.config 转换规则进行 QA 和生产来改变值。

标签： javascript css asp.net

【解决方案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);
}

【讨论】：