jQuery CSS methods - Exercises, Practice, Solution

Last update on May 31 2023 16:04:03 (UTC/GMT +8 hours)

jQuery CSS [10 exercises with solution]

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

1. Get the background color of an element.
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.
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.
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.
Sample Data :

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

Click me to see the solution

5. Access the position of an element.
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.
Sample Data :

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

Click me to see the solution

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

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

Click me to see the solution

8. Find an element that contains a specified class.
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.
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.
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 !

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.

Live Demo:

See the Pen common-jquery-core-exercise by w3resource (@w3resource) on CodePen.