January 13, 2016
HomejQuery QuestionsHow to Add Style Using jQuery

How to Add Style Using jQuery

By  jQuery Questions  0 Comments

To add style using jQuery, we make use of css() function.  Example is given below.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//Function to apply style.
function myStyle(){
$('#divHello').css('background-color','red');
}
</script>
</head>
<body>
<input type="button" value="Apply CSS" onclick="myStyle()"/> <br /> <br />
<div id="divHello">Hello World! </div>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>jQuery Tutorial </title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> //Function to apply style. function myStyle(){ $('#divHello').css('background-color','red'); } </script> </head> <body> <input type="button" value="Apply CSS" onclick="myStyle()"/> <br /> <br /> <div id="divHello">Hello World! </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial </title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
 
//Function to apply style.
function myStyle(){
    
    $('#divHello').css('background-color','red');
 }

</script>
 
</head>
<body>

<input type="button" value="Apply CSS" onclick="myStyle()"/> <br /> <br />
<div id="divHello">Hello World! </div>
 
</body>
</html>
 
         

You May Also Like:

How To Remove CSS Class Using jQuery How To Add CSS Class Using jQuery Convert Your Disk from GPT Style to MBR style without Losing Any Data How to Uncheck All Checkboxes Using jQuery How to Uncheck a Checkbox Using jQuery