2016-05-11 6 views
0

Я хочу изменить цвет фона моей строки заголовка h1 на моей веб-странице во время выполнения. Если мы работаем в prod/dev, я хочу, чтобы цвет фона тега заголовка H1 соответствовал.C# ASPX Set h1 background color runtime

В настоящее время я ставлю цвет фона для h1 следующим образом:

align="center" style="background-color: #389BD6 ">HEADER 1 LINE 

Но я хочу, чтобы иметь возможность задать цвет по-разному в зависимости от текущей среды.

Я предполагаю, что это будет связано с css, но это ново для меня и нуждается в некоторой помощи.

Благодаря

+0

Что вы используете для определения окружающей среды? IE, как стильная таблица будет знать, в какой среде вы находитесь – Pete

ответ

0

CSS: Только что доктор прописал

CSS, как вы упомянули это правильный курс действий справиться с этим, вы можете просто определить стиль, который ориентирован на ваши h1 элементы, как и ожидалось :

<style type='text/css'> 
    h1 { 
     text-align: center; 
     background-color: #389BD6; 
    } 
</style> 

Вы можете явно указать это в самой (желательно в разделе <head>) ваш HTML или с помощью внешнего файла CSS (также defin ред в <head> раздел страницы):

<!-- A reference to a CSS file containing the previous style --> 
<link href="your-css-file.css" rel="stylesheet" type="text/css" /> 

Styling на основе окружающей среды

Что касается изменения стиля, основанного на среде, вы могли бы рассмотреть вопрос о добавлении класса CSS на высоком уровне элемент вашей страницы во время выполнения и добавить еще один стиль для переопределения предыдущего по умолчанию одно:

<!-- Define a runat="server" tag on your body element and an ID (assumes Web Forms) --> 
<body id="body" runat="server"> 

, а затем в вашем Page_Load случая, установите класс на основе вашей ан (т.е. Отладки, производство и т.д.):

// Find your body element 
var body = FindControl("body") as HtmlGenericControl; 
// If you were able to find it, set it's class 
if(body != null) 
{ 
    // Set your environment here 
    body.Attributes["class"] = "production"; 
} 

Это сделает класс «производство» на ваш <body> элемента:

<body id="body" class="production"> 

, которые вы можете использовать, чтобы определить другой стиль CSS таргетинг только <h1> элементов производственная среда:

<style type='text/css'> 
    h1 { 
     text-align: center; 
     background-color: #389BD6; 
    } 
    /* Target <h1> elements in production */ 
    .production h1 { 
     background-color: purple; 
    } 
</style> 

Вы также можете сделать это путем создания нескольких таблиц стилей (т.е. production.css, development.css и т. Д.) И определяя каждый из ваших конкретных стилей и используя какой-то механизм, например Preprocessor Directives, чтобы определить, какой из них использовать.

0

Если вам это нужно, чтобы быть динамичным, вы могли бы сделать что-то вроде:

<link href="http://somewebsite.com/css.aspx" type="text/css" rel="stylesheet"> 

Таким образом, у вас есть ASPX файл, который обрабатывается как файл CSS, но вы можете динамически установить значение h1 фона цвет, например, используя любую логику, которую вы желаете в .aspx . Используйте эту таблицу стилей, чтобы содержать стиль, который может меняться во время выполнения, поскольку он создает много накладных расходов.