Jquery Css Methods

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.

HTML Example

We will use the following HTML for the examples listed below.

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); });