Есть ли способ перезаписать "Тему CSS" для моего веб-сайта?

#javascript #html #css #.net #document-body

#javascript #HTML #css #.net #документ-тело

Вопрос:

Я хочу иметь возможность изменить текущий основной CSS на тему CSS для Хэллоуина. Проблема в том, что мои страницы .Net являются шаблонами. Должен быть способ заставить класс body проверить, существует ли перезапись темы CSS?

Могу ли я изменить тему, выполнив что-то вроде этого:

CSS:

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

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

Затем это помещается в редактируемую область заголовка:

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

Мои теги ТЕЛА

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

Я пробовал выше, но это не работает.

Нужна ли мне функция doOnLoad(), прикрепленная к <body> , которая проверяет cssTheme и применяется, если она есть?

1. это файл css? Можете ли вы заменить новый файл css?

2. Я могу, но <body> тег заблокирован, поскольку это шаблон, и . halloween CSS не будет перезаписывать класс css, который уже существует

3. это язык .net? Возможно, вы сможете попасть в одно из событий рендеринга в global.asax (или эквивалентном) и изменить отправляемый HTML-код таким образом, чтобы у .css было новое имя (пока этот .css существует, браузер затем подберет его)

Ответ №1:

Да, вы можете это сделать — «C» в CSS означает каскадирование, что означает, что вы можете перезаписать определенные элементы ваших таблиц стилей более конкретным определением.

Это показано ниже с помощью a div , но будет работать точно так же с a 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 — example для 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));
        }

    }