Apply and remove CSS class or style in asp.net code behind - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon