w3resource logo


jquery exercises

jQuery CSS methods - Exercises, Practice, Solution

Secondary Nav

jQuery CSS [10 exercises with solution]

[An editor is available at the bottom of the page to write and execute the scripts.]

1. Get the background color of an element. Go to the editor
Click on the following paragraphs and get the background color.

Sample Data :
HTML :

<body>
<p>jQuery Exercises</p>
<p>and Solution.</p>
</body>

CSS :

<style>
  p {
      margin: 8px;
	  font-size: 16px;
	}
 .myclass 
    {
	 color: #FA5858;
	}  
.highlight 
  {
    background: #CEF6F5;
  }
 </style>

Click me to see the solution

2. Add the following class "myclass" to the matched paragraph elements. Go to the editor
Sample Data :
HTML :

<body>
<p>jQuery Exercises</p>
<p>and Solution.</p>
</body>

CSS :

  
<style>
  p {
      margin: 8px;
	  font-size: 16px;
	}
 .myclass 
    {
	 color: #FA5858;
	}  
.highlight 
  {
    background: #CEF6F5;
  }
 </style>

Click me to see the solution

3. Find the widths and heights of various elements. Go to the editor
Sample Data :

<body>
<p> jQuery Exercises</p>
<div style="height:75px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:#81DAF5;"></div>
</body>

Click me to see the solution

4. Get the scroll top and left of an element. Go to the editor
Sample Data :

<body>
<p></p>
 </body>
 

Click me to see the solution

5. Access the position of an element. Go to the editor
Sample Data :

 <body>
 <div style="height:75px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:#F3E2A9;">
 </div>
 <p></p>
 </body>

Click me to see the solution

6. Find the innerHeight and innerWidth of an element. Go to the editor
Sample Data :

<body>
<div></div>
<p></p>
</body>

Click me to see the solution

7. Find the outerHeight and outerWidth of an element. Go to the editor
Sample Data :

<body>
<div></div>
<p></p>
</body>
   

Click me to see the solution

8. Find an element that contains a specified class. Go to the editor
Sample Data :
HTML:

<body>
<div id="div1" class="divclass"></div>
<div id="div2" </div>
<div id="div3" </div>
</body>

CSS:

<style>
 .divclass 
  {
    width: 90px;
	height: 75px;
	margin: 5px;
	background-color:#F3E2A9
 }
</style>

Click me to see the solution

9. Find the offset of an element. Go to the editor
Sample Data :
HTML:

<body>
<p></p>
</body>

CSS:

<style>
p {
    margin-top:20px;
    margin-left: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
</style>

Click me to see the solution

10. Toggle a specified class when an element is clicked. Go to the editor
Sample Data :
HTML:

<body>
<p></p>
</body>

CSS:

<style>
p {
    margin-top:20px;
    margin-left: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
</style>

Click me to see the solution

More to Come !

* To run the code mouse over on Output panel and click on 'Run with JS' button.*

JS Bin



Join our Question Answer community to learn and share your programming knowledge.