This article will show you how to add remove or change css
class using jquery
in asp.net.
In this I have used radiobutton to change the button css.
Some of my previous articles are as follows: Disable
And Enable Button Using jQuery In Asp.Net, Cookies
Create, Read and Delete Operation Using jQuery in Asp.Net, Css
Class Change of Button On Radiobutton Selection In Asp.Net Using jQuery, Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net, jQuery
Error Message Display Using Popup Dialog Box In Asp.Net, jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net, Get
All Checked Checkbox Value Using jQuery in Asp.Net CheckBoxList.
So for this article first we will create a new asp.net application and add the below code into the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm24.aspx.cs" Inherits="WebApplication2.WebForm24"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add
Remove Or Change Css Class Using jQuery In Asp.Net</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"
type="text/javascript"></script>
<style>
.myButton
{
background-color:Yellow;
font-size:14px;
font-weight:bold;
}
</style>
<script language="javascript">
function
AddCssToButton() {
$('#<%=Button1.ClientID %>').addClass("myButton");
}
function
RemoveCssToButton() {
$('#<%=Button1.ClientID %>').removeClass("myButton");
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="button" onclick="javascript:AddCssToButton();" />Add
Css Class<br />
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="button" onclick="javascript:RemoveCssToButton();" />Remove
Css Class<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Change Button CSS" />
</div>
</form>
</body>
</html>
|
Please check the below code which is the javascript code.
<script src="http://code.jquery.com/jquery-2.1.4.min.js"
type="text/javascript"></script>
<style>
.myButton
{
background-color:Yellow;
font-size:14px;
font-weight:bold;
}
</style>
<script language="javascript">
function
AddCssToButton() {
$('#<%=Button1.ClientID %>').addClass("myButton");
}
function
RemoveCssToButton() {
$('#<%=Button1.ClientID %>').removeClass("myButton");
}
</script>
|
In above code I have used a css style and add the css class
to the button using jquery. Now we have done run the application to check he
output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view