How to Modify a CSS Style in the Code Behind File for Divs in ASP.NET

How do you modify a CSS style in the code behind file for divs in ASP.NET?

testSpace.Style.Add("display", "none");

How to set a:before css style from code behind aspx.cs page

After researching on it finally i found a solution to my problem. For this i have created an object for LiteralControl, then created a style tag as a string using string builder by appending my property in it, now i have initialized LiteralControl's Text property to above style tag string and finally added the LiteralControl to page header.

It is rendering the generated style tag with property values in my page header and rendered style is applied on my page. Following is the code i used in code behind:

System.Web.UI.LiteralControl ltr = new System.Web.UI.LiteralControl();
StringBuilder sb = new StringBuilder();
sb.Append("<style type=\"text/css\" rel=\"stylesheet\"> .m-quick-links ul li a:before { background-image: url(");
sb.Append(FirstLinkIcon); //here i am appending property value in css style
sb.Append(") !important; } </style>");
ltr.Text = sb.ToString();
this.Page.Header.Controls.Add(ltr);

Following is rendered style tag on my page header from this:

<style type="text/css" rel="stylesheet"> .m-quick-links ul li a:before { background-image: url(http://localhost:8082/assets/img/sprites/global-se8a7877705.png) !important; } </style>

Set the css class of a div using code behind

divControl.Attributes["class"] = "myClass";

divControl.Attributes("class") = "myClass"

You'll need to have a rule like this one on your css file

.myClass
{
   height:200px; 
   /*...more styles*/
}

Changing the CSS in code behind asp.net

You need to add runat="server" to the div and access it as a HtmlControl in your codebehind. For example:

HtmlControl div1 = (HtmlControl)Page.FindControl("downloadableProducts");

Changing div's style in asp.net

Well to access the div from code-behind, it would need to be runat="server" but if it is you just access the style attribute:

id1.Attributes["style"] = "display:\"\"";

but as Mr. Alien writes in the comment to your question, you probably just want to clear it, or set it to block or something.

How to change style of an element in code behind .net Core

The first way,you could judge the data in client side like below:

@model Test
<div id="MainDiv" class="flex justify-between items-center @(Model.IsDone=="Yes"?"bg-red-300":"bg-green-300")">

Controller:

public IActionResult Index()
{
    var model = new Test()
    {
        IsDone=="Yes"
    };
    return View(model);
}

The second way,you could use ViewData to store the class and judge in the server side:

Index.cshtml:

@{
    var styleClass = ViewData["Style"];
}

<div id="MainDiv" class="flex justify-between items-center @styleClass">
    <a>Done</a>
</div>

Controller:

public IActionResult Index()
{
    if(YourCondition)
    {
        ViewData["Style"] = "bg-red-300";
    }
    else
    {
        ViewData["Style"] = "bg-green-300";
    }
    return View();
}

Change list style attribute from code behind

The code that helped me

<li style='background-color: <%# Eval("BackgroundColor.PersistedValue") %>; '>

Access color string from code behind in .css-File in ASP

CSS files aren't processed by ASP.NET (unless you reconfigure your entire HTTP pipeline, which is a bad idea in general), so the short answer is "no".

...however a solution exists with CSS Custom Properties!

Part 1:

In your .aspx page, ideally in the <head> (you're using <asp:ContentPlaceHolder, I hope?), put this after your current <link rel="stlyesheet"> element:

<style type="text/css">
:root {
    --theme-color: <%= this.customColor %>;
}

.linkButtonPassword:hover,
.login-input-div.focus > .login-faItem > i,
.login-input-div:before,
.login-input-div:after {
    color: var(--theme-color);
}
</style>

You could argue this is the same thing as overwriting the properties with <%= %> directly - but the difference here is that you can now remove the color: property from the above and use color: var(--theme-color); directly in your .css file!

Part 2:

So now your <head> should contain this:

<style type="text/css">
:root {
    --theme-color: <%= this.customColor %>;
}
</style>

And your .css file should contain this:

.linkButtonPassword:hover {
    color: #38d39f;
    color: var(--theme-color);
}

.login-input-div.focus > .login-faItem > i {
    color: #38d39f;
    color: var(--theme-color);
}

.login-input-div:before,
.login-input-div:after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #38d39f;
    background-color: var(--theme-color);
    transition: .4s;
}

The color values are repeated twice (first as a literal hex-color, then again with var(--theme-color)) to ensure backwards compatibility with older browsers that don't support CSS Custom Properties (i.e. IE11 - which I assume you have to support seeming as you're using ASP.NET WebForms).

Bootstrap Style & Surrounding Div tag from ASP.NET Code Behind

You need to use CssClass property.

private void CreateTextBox(string id, string labelName)
{
     Label lbl = new Label();
     lbl.cssClass = "col-sm-2 control-label";
     lbl.Text = labelName;
     pnlDynamicControls.Controls.Add(lbl);

     TextBox txt = new TextBox();
     txt.cssClass = "form-control";
     txt.ID = id;
     pnlDynamicControls.Controls.Add(txt); 
}

Trying to set background image, but div id name doesn't show up in code behind, what am I doing wrong?

You can use OnInit(EventArgs e) event method to get image dynamic into body.
Please refer below link.

Dynamic background-image on body (ASP.NET)