Manipulating Styles with jQuery

In the previous article we discussed about manipulating element CSS Classes using jQuery. In this article we’ll explore how to read or manipulate style properties of elements using jQuery methods. The CSS Classes defined using class attribute can be used to control the look and feel of an element. A predefined CSS definition matched with class name is required which reflects the actual style implementation. However, using style properties we can straightaway manipulate the styles of the matched elements. In other words, we can read or change the elements background-color, width, height and many other style properties instantly. In this case, a pre-defined style definition is not required.

The jQuery style properties will return corresponding style value if used without any argument, at the same time used to set corresponding style value if used with an argument.

also read:

In the following example, we are reading the div styleDiv style properties (background-color, width, height) by clicking inside the styleDiv, and displaying them on console. At the same time we have three buttons to update the background-color, width and height of the div styleDiv. Once the properties are updated, we can see the updated properties again by clicking inside the styleDiv. The complete code listing is below:

<html>
  <head>
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
	$("#styleDiv").click(function() {
		console.log('styleDiv width: ' + $("#styleDiv").css('width'));
		console.log('styleDiv height: ' + $("#styleDiv").css('height'));
		console.log('styleDiv background-color: '
                    + $("#styleDiv").css('background-color'));
	});

	$("#bgColorBtn").click(function() {
	   $("#styleDiv").css({'background-color': '#c0c0c0' });
	});

	$("#widthBtn").click(function() {
	  $("#styleDiv").width(400);
	});

	$("#heightBtn").click(function() {
	  $("#styleDiv").height(150);
	});
    });
   </script>
  </head>
  <body>
    <h1>Style Properties Manipulation with jQuery</h1>

    <div id="styleDiv" style="border:2px solid;border-radius:25px;
              text-align:center;height:100px;width:350px;">
        <p>This is styleDiv.</p>
        <p>Please click to see style information in the console.</p>
    </div>
    <br/>

    <input type="button" id="bgColorBtn" value="Update Background Color"/>
    <input type="button" id="widthBtn" value="Increase Width"/>
    <input type="button" id="heightBtn" value="Increase Height"/>
   </body>
</html>

The following screen capture shows us on how we can read the element’s style properties.

read-style-properties

When we click on the ‘Update Background Color’ button, the styleDiv background-color property is set to html color code value #c0c0c0.

update-background-color

When we click on the ‘Increase Width’ button, the styleDiv width property is set to new value, also we can see that the styleDiv has increased width. In the same way, when we click on the ‘Increase Height’ button, the styleDiv height property is set to new value, also has the increased height. The below screenshot shows the difference.

update-width-height

Here is the quick summary of other style properties we can work with jQuery.

.css(propertyName)

Gets the style property value of an element. The below code snippet gets the background-color style property of the element styleDiv.

$("#styleDiv").css('background-color')

We can also set the style property using this method as shown below.

$("#styleDiv").css({'background-color': '#c0c0c0' });

.height(value)

Gets the height of an element or sets the height of an element.

To get the height of an element.

$("#styleDiv").css('height')

To set the height of an element.

$("#styleDiv").height(150);

.innerHeight()

Returns the height of the matched element including any padding (top and bottom) but not border. This method has no arguments.

$("#styleDiv").innerHeight()

.innerWidth()

Returns the width of the matched element including any padding (left and right) but not border. This method has no arguments.

$("#styleDiv").innerWidth()

.offset()

Retrieves the current position of a matched element relative to the document. This method returns an object containing the properties left and top.

$("#styleDiv").offset().left
$("#styleDiv").offset().top

.outerHeight(includeMargin)

Gets the current height of the matched element including padding, border and margin. If includeMargin is set to true, the margin is considered when calculating the outer height.

$("#styleDiv").outerHeight()
$("#styleDiv").outerHeight(true)

.outerWidth(includeMargin)

Gets the current width of the matched element including padding, border and margin. If includeMargin is set to true, the margin is considered when calculating the outer width.

$("#styleDiv").outerWidth()
$("#styleDiv").outerWidth(true)

.position()

Retrieves the current position of a matched element relative to the offset of the parent element. This method returns an object containing the properties left and top.

$("#styleDiv").position().left
$("#styleDiv").position().top

.scrollLeft(value)

Gets or sets the current horizontal scroll position of the scroll bar for the matched elements. The horizontal scroll position is the number of pixels that are hidden from view to the left of the scrollable area. If the scroll bar is at the extreme left, or if the element is not scrollable, this method returns 0.

$("#styleDiv").scrollLeft()
$("#styleDiv").scrollLeft(100)

.scrollTop(value)

Gets or sets the current vertical scroll position of the scroll bar for the matched elements. The vertical scroll position is the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the extreme top, or if the element is not scrollable, this method returns 0.

$("#styleDiv").scrollTop()
$("#styleDiv").scrollTop(100)

.width(value)

Gets the width of an element or sets the width of an element.

To get the width of an element.

$("#styleDiv").css('width')

To set the width of an element.

$("#styleDiv").width(100);

These jQuery methods are useful to manipulate elements style properties on the fly. The method .css() is useful to read, add or change style properties of any element. The .width() and .height() methods are used to read or set the element width or height. We can also manipulate element’s scrollable position using methods .scrollLeft() and .scrollTop() methods. The .offset() and .position() methods returns the current position of the element relative to document and parent respectively.

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here.

Comments

comments

About Ganesh Prakhya

Trackbacks

  1. [...] Manipulating Styles with jQuery [...]

Speak Your Mind

*