jQuery - CSS Dimensions

CSS dimensions refer to the width and height of HTML elements, and jQuery provides methods to manipulate these dimensions dynamically.

1. Set Width and Height

The width() and height() methods in jQuery are used to set the width and height of selected elements, respectively.

Example:

// Set the width of all paragraphs to 200 pixels
$("p").width(200);

// Set the height of all divs to 300 pixels
$("div").height(300);

This code sets the width of all paragraphs to 200 pixels and the height of all div elements to 300 pixels.

2. Get Width and Height

The width() and height() methods can also be used to get the current width and height of selected elements.

Example:

// Get the width of the first paragraph
var width = $("p:first").width();

// Get the height of the first div
var height = $("div:first").height();

console.log("Width: " + width + " pixels");
console.log("Height: " + height + " pixels");

This code retrieves the width of the first paragraph and the height of the first div element and logs the values to the console.

3. Conclusion

Manipulating CSS dimensions using jQuery provides developers with the ability to dynamically adjust the layout and appearance of web pages. Whether setting or retrieving width and height values, jQuery simplifies the process of working with CSS dimensions.

Archive