jQuery CSS - Find the widths and heights of various elements

Last update on May 30 2022 10:19:40 (UTC/GMT +8 hours)

jQuery CSS : Exercise-3 with Solution

Find the widths and heights of various elements.

Sample Data :

HTML :

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

Solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Find the widths and heights of various elements</title>
  </head>  
<body>
<p> jQuery Exercises</p>
<div style="height:75px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:#81DAF5;"></div>
</body>
</html>

JavaScript Code :

console.log("The width of the Paragraph is:"+$("p").width());

console.log("The width of the window is:"+$("div").width());

Live Demo:

See the Pen jquery-css-exercise-3 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Add the following class "myclass" to the matched paragraph elements.
Next: Get the scroll top and left position of an element.