jQuery provides methods to easily and effectively manipulate CSS related properties of DOM elements. We will take a look at the more common methods in this article.
Methods
The methods listed in the following table are commonly used for DOM manipulation.
| Method | Description | Syntax |
|---|---|---|
addClass() | Adds the class(es) to the matched elements. Separate the classes with space | $(selector).addClass(class) |
css() | Gets or sets one or more style properties for selected elements | $(selector).css({property:value})) |
hasClass() | Determines if any of the selected elements have a specified class | $(selector).hasClass(class) |
height() | Gets or sets the height of selected elements | $(selector).height(value) |
innerHeight() | Gets or sets the height of selected element including padding, not border | $(selector).innerHeight() |
innerWidth() | Gets or sets the height of selected elements including padding, not border | $(selector).innerWidth() |
offset() | Sets or returns the position (relative to the document) for selected elements | $(selector).offset() |
outerHeight() | Gets or sets the height of selected element including padding and border | $(selector).outerHeight() |
outerWidth() | Gets or sets the height of selected elements including padding and border | $(selector).outerWidth() |
position() | Returns the position relative to the parent element, of the selected element | $(selector).position() |
removeClass() | Removes one or more classes from selected elements | $(selector).removeClass(class) |
toggleClass() | Toggles between adding/removing one or more classes from selected elements | $(selector).toggleClass() |
width() | Sets or returns the width of selected elements | $(selector).width(value) |
HTML Example
We will use the following HTML for the examples listed below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Examples
Click the image button to try the various CSS related methods below. For detailed information about each method, you may want to visit jQuery.com.
.addClass()
$("#go").click(function () {
$("#div1").addClass("newClass");
});.css()
$("#go").click(function () {
$("#div1").css({"color":"red","font-size":"2em"});
});.hasClass()
$("#go").click(function () {
$("#div1").html($("#div1").hasClass("newClass"));
});.height(), or .height(value)
$("#go").click(function () {
$("#div1").height(96);
});.innerHeight()
$("#go").click(function () {
$("#div1").text("innerHeight: " + $("#div1").innerHeight());
});.innerWidth()
$("#go").click(function () {
$("#div1").text("innerWidth: " + $("#div1").innerWidth());
});.offset()
$("#go").click(function () {
x=$("#div1").offset();
$("#div1").text("Left: " + x.left + " Top: " + x.top);.outerHeight()
$("#go").click(function () {
$("#div1").text("outerHeight: " + $("#div1").outerHeight());
});.outerWidth()
$("#go").click(function () {
$("#div1").text("outerWidth: " + $("#div1").outerWidth());
});.position()
$("#go").click(function () {
x=$("#div1").position();
$("#div1").text("Left: " + x.left + " Top: " + x.top);.removeClass()
$("#go").click(function () {
$("#div1").removeClass("newClass");
});.toggleClass()
$("#go").click(function () {
$("#div1").toggleClass("class1 class2");
});.width() or width(value)
$("#go").click(function () {
$("#div1").width(500);
});
