Tuesday, September 5, 2017

Apply and remove CSS class or style in asp.net code behind

In this article I am going to explain how to apply and remove CSS class or style in asp.net code behind.

Description:
I want to apply and remove CSS class or style code behind.

Implementation:
I have add 2 buttons to webform, one to apply style and 2nd to remove style or class.

Complete HTML Markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Apply and remove CSS class or style</title>
    <style type="text/css">            
                .content
              {
                  height:100px;
                  background-color:red;
              }
       </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
          <asp:Button ID="btncss" runat="server" Text="Apply CSS class"  />
         <asp:Button ID="btnremovecss" runat="server" Text="Remove CSS class" />
        <div id="content" runat="server">
        </div>
    </div>
    </form>  
</body>
</html>

Apply and remove CSS class or style
On buttons click write the below given code.

C# code
protected void btncss_Click(object sender, EventArgs e)
    {
        content.Attributes.Add("class", "content");
        //content.Attributes.Add("style", " height:100px; background-color:red;");
    }

    protected void btnremovecss_Click(object sender, EventArgs e)
    {
        content.Attributes.Remove("class");
        //content.Attributes.Remove("style");
    }


VB.net code
Protected Sub btncss_Click(sender As Object, e As EventArgs) Handles btncss.Click
        content.Attributes.Add("style", " height:100px; background-color:red;")
        'content.Attributes.Add("class", "content")
    End Sub

    Protected Sub btnremovecss_Click(sender As Object, e As EventArgs) Handles btnremovecss.Click
        content.Attributes.Remove("style")
        'content.Attributes.Remove("class")
    End Sub


1 comment:

  1. It removes all classes if they are more than one

    ReplyDelete