JQuery Set Background

From CoderLearner
Jump to: navigation, search

jQuery Set Background Color

$.css() to set the HTML element background color.

Syntax

	$("p").css('background-color','grey');
	$('.kk33').css('background-color','green');
				

Example 1

<!DOCTYPE html>
<html>
	<head>
		<title>Access ID</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery.min.js">
		</script>
		<script>
			$(document).ready(function(){
				$("p").css('background-color','grey');
				$('.kk33').css('background-color','green');
				
			});
		</script>
	</head>
	<body>
                <p>All of the people are very happy.</p>
		<p class="k33">Great people like to say great things.</p>
		<div class="kk33">Nothing can be changed right now!</div>
		
	</body>
</html>

Example 2

<!DOCTYPE html>
<html>
   <head>
      <title>First Project</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <style>
         .g1 {
            background-color:#D0D0D0; 	
         }
         .g2 {
            background-color: #F0F0F0;
         }
         .g3 {
            background-color: #3333FF;
         }
         .g4 {
            background-color: #CC6633;
         }
      </style>
      <script language="javascript">
         $(document).ready(function(){
            $('#changeit').click(function(){
               var sel_value = $('select[name="bg"] option:selected').val();
               $('div p').addClass(sel_value);
            });
         });
      </script>
   </head>
   <body>
      <select name="bg">
         <option value="g1">Background-1</option>
         <option value="g2">Background-2</option>
         <option value="g3">Background-3</option>
         <option value="g4">Background-4</option>
      </select>
      <button id="changeit">Change It</button>
      <div>
         <p>
            Learn how to use jQuery with coderlearner.com.
         </p>
      </div>
   </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>