有没有办法可以覆盖我网站的“CSS 主题”？答案

【问题标题】：Is there a way I can overwrite the 'CSS Theme' for my Website?有没有办法可以覆盖我网站的“CSS 主题”？
【发布时间】：2016-10-12 13:32:14
【问题描述】：

我希望能够将当前的 BODY css 更改为万圣节的 CSS 主题。问题是我的 .Net 页面是模板。必须有一种方法可以让正文类检查是否存在 CSS 主题覆盖？

我是否可以通过执行以下操作来更改主题：

CSS：

/* standard theme */
body {
    background-color: white;
    font-color: #000;
}

/* halloween theme css */
body.halloween {
    background-color: black;
    font-color: #666;
}

然后这个放在 HEAD 的可编辑区域：

<%
'CSS Theme overwrite - uncomment if required
 cssTheme = "halloween"
 %>

我的身体标签

<body class="<%=cssTheme%"> 
    content........
</body>

我已经尝试了上述方法，但它不起作用。

我是否需要一个附加到 <body> 的函数 doOnLoad() 来检查 cssTheme 并在存在时应用？

【问题讨论】：

它是一个css文件吗？你能用新的css文件替换吗？
我可以，但是<body> 标签被锁定，因为它是一个模板，并且 .halloween CSS 不会覆盖已经存在的 css 类
这是.net 语言？您可能能够进入 global.asax （或等效）中的渲染事件之一并修改正在发出的 html 以使 .css 具有新名称（只要该 .css 存在，浏览器就会捡起来）

标签： javascript html css .net document-body

【解决方案1】：

是的，您可以这样做 - CSS 中的“C”代表级联，这意味着您可以用更具体的定义覆盖样式表的某些元素。

下面用div 说明了这一点，但与body 或HTML 中的任何其他元素的工作方式相同。（注意：javascript无关，只是用来添加CSS类Halloween，你会看到它定义了不同的表示规则。）

$('button').click(function(){
 $('div').addClass("halloween");  
});

div{
  background-color:grey,
    color:Black
}

div.halloween{
  background-color:black;
  color:orange
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Content here
 </div>

<button>make halloween</button>

【讨论】：

【解决方案2】：

在 global.asax.cs - c# 示例

    void Application_PostReleaseRequestState(object sender, EventArgs e)
    {

        if (Response.ContentType == "text/html")
            Response.Filter = new myFilter(Response.Filter);

    }

    class myFilter:System.IO.MemoryStream
    {

        private System.IO.Stream outputStream =null;

        public myFilter(System.IO.Stream output)
        {
            outputStream = output;
        }

        public override void Write(byte[] buffer, int offset, int count)
        {

            var contentInBuffer = System.Text.UTF8Encoding.UTF8.GetString(buffer);


            //change the .css here
            contentInBuffer = contentInBuffer.Replace(@"MainDesign.css", @"MainDesign_hallow.css");

            outputStream.Write(System.Text.UTF8Encoding.UTF8.GetBytes(contentInBuffer), offset, System.Text.UTF8Encoding.UTF8.GetByteCount(contentInBuffer));
        }

    }

【讨论】：