.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Javascript >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to apply/change CSS dynamically

Posted By:shankey       Posted Date: February 24, 2011    Points: 100    Category: Javascript    URL: http://www.dotnetspark.com  

This article explain How to apply/change CSS dynamically using javascript at runtime in asp.net
 

Apply/Change CSS dynamicaly using Javascript

Following is the sequence of Screenshot which depicts how the css is toggled dynamicaly using javascript. The CSS of the element is changed dynamicaly using javascript fuction.

1.  No CSS yet applied


Following are the html elements which create above page when page is being run.
 

    
Please enter your valid user name and password.


2.  When User click's Toggle CSS button for the first time



Following is the CSS applied to the

element when user click the Toggle CSS button.

.Error
{
            font-family:Times New Roman Baltic;
            font-size:13;
            color:Red;
            height:30px;
}


3.  When User click's Toggle CSS button for the second time



Following is the CSS applied to the

element when user clicks the Toggle CSS button.

  .Warning
  {
  font-family:Calibri;
  font-size:11;
  color:Orange;
  height:30px;
  }

 

How to Apply/Change CSS dynamically?

  Following is the Javascript function which accepts a parameter and then it gets id of the element and compare the name of the class using className property and depending on the value it assign new value to the element.
 



Above function is called on the client click event of the button as shown below. After calling the function "return false;" is written, the reason for this is that the page is do not postback. If you remove the "return false;" statement the page will start having postback when user click's Toggle CSS button and page will not retain the dynamically assigned CSS class.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend