Lesson 9 - Styling in jQuery

In the previous lesson, Selectors in jQuery, part three, we finished the selectors in jQuery. In today's tutorial of the most popular JavaScript library, we'll focus on styling.

Creating the page

It's probably not a surprise that we're going to create an HTML and JS files first as always.

JS

We'll insert the basic structure to the JS file:

$(function() {
    // The code here is executed not before the page is loaded
});

HTML

Let's place the following code into the HTML file:

<ul>
    <li>Apophis</li>
    <li>Anubis</li>
    <li>Ba'al</li>
    <li>Sokar</li>
    <li>Ti</li>
    <li>Ra</li>
</ul>

And we'll also add styles:

body {
    background: #e5e5e5;
    color: #3d3d3d;
    margin: 0px;
}

* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style-type: none;
    border: 0px;
}

ul {
    float: left;
    padding: 10px 20px;
    text-align: center;
}

ul li {
    background : #CACACA;
    color      : #444;
    width      : 100px;
    border     : 2px solid #A6A6A6;
    margin     : 10px 0;
    padding    : 5px 10px;
    font-family: 'Open Sans';
    font-size  : 18px;
    text-align: left;
}

This is how our page looks like:

In jQuery, we can style anything using several methods.

css()

The css() method sets or gets CSS element properties. For example, if we want to find out what the text color is, we pass just the name of this property - color. If we want to change this property, we pass a second argument, which will be the new value of the property.

Property names are the same as in CSS. We can also use the camelCase notation as well. Thus, both background-color and backgroundColor will work.

Example #1

Let's try to style the bottom and top borders of the items, using both notations:

$("ul li").css("borderTop", "2px solid red");
$("ul li").css("border-bottom", "2px solid blue");

The result:

Since the jQuery method returns a jQuery object again, we can also chain the methods and write everything as a one-liner:

$("ul li").css("borderTop", "2px solid red").css("border-bottom", "2px solid blue");

Example #2

If we wanted to set multiple styles at the same time, a JSON object can be useful. We can pass it as a method argument. Let's show the example above using a JSON object. This approach is much more practical and we don't have to write the css() method so many times.

$("ul li").css({
    "borderTop" : "2px solid red",
    "border-bottom" : "2px solid blue"
});

The result:

A JSON object can, of course, be created earlier and passed as a variable.

let myStyle = {
    "borderTop" : "2px solid red",
    "border-bottom" : "2px solid blue"
}
$("ul li").css(myStyle);

Example #3

Okay, but what can we do if we want to get the values of multiple properties? We can use arrays for this purpose. We can simply pass an array of the property names we want to get the values of as the css() method argument. For example, if we were interested in the width, color, and border properties, we could get the values of them all them by writing:

let styles = $(this).css(["width", "color", "border"]);

Examiner

Let's create a sample element examiner. It'll print these properties of an element we clicked on. We'll add div#messages at the end of the body.

<div id="messages"></div>

We'll also create an array of text messages which we'll print at the end.

let messages = ["This item has these styles:"];
let styles = $(this).css(["width", "color", "border"]);

The styles variable contains an object in the form of property: "value". Now, we'll use the $.each() method to get the property names and values, one by one. We'll pass the 'styles' variable and an anonymous function as the parameters. The anonymous function will have two parameters - property and value.

We'll push the property name and its value separated by : to our messages.

$.each(styles, function(property, value) {
    messages.push( property + " : " + value );
});

Now we have a complete array of messages, we just have to print it. We'll join the array items to a single string using the join() method. We'll use the <br> elements as separators to display individual style messages on separate lines.

$("*").on("click", function(e) {
    let messages = ["This item has these styles:"];
    let styles = $(this).css(["width", "color", "border"]);
    $.each(styles, function(property, value) {
        messages.push(property + " : " + value );
    });
    let message = messages.join("<br>");
    $("#messages").html(message);
    e.stopPropagation();
});

The live demo:

Our function will work for all the elements on the page. We used the e.stopPropagation() event method, which stops the propagation of the click event to other underlying elements. If we didn't do that, 3 clicks would be triggered:

• 1st on <li>,
• 2nd on <ul>
• 3rd on <body>

And we'd always see the information about <body> only.

width() and height()

Using jQuery, we can also change the width and height of elements. These functions don't change the CSS properties but set inline styles directly to the element, meaning they'll be written to the style="" attribute. If we want to get the width or height, we don't pass any arguments. If we want to change this value, we pass a new value as the argument.

Example #4

Let's try changing the width using the previous example. We'll add the following code at the end of the anonymous function:

$(this).width($(this).width() + 10);

The live demo:

We can see that when we click on an element, its width increases by 10px.

innerWidth() and innerHeight()

These methods include padding to the width and height, apart from that they work the same as the previous ones.

Example #5

Let's make sure there's a difference between the width() and innerWidth() methods.

We'll log the individual dimensions to the console.

let messages = [];
messages.push("width: " + $("ul li").width());
messages.push("inner width: " + $("ul li").innerWidth());
let message = messages.join("<br>");
$("#messages").html(message);

The result:

Now we can really see the difference here.

outerWidth() and outerHeight()

These methods calculate the element dimensions including padding, margin, and border. The methods work the same way as the previous ones.

Example #6

Let's try to log the values returned by all three methods to the console. Our padding is set to 10px on each side, there's no margin, and the border is 2px on each side.

An example:

let messages = [];
messages.push("width: " + $("ul li").width());
messages.push("inner width: " + $("ul li").innerWidth());
messages.push("outer width: " + $("ul li").outerWidth());
let message = messages.join("<br>");
$("#messages").html(message);

The result:

We can see that the result is correct.

offset() a position()

This pair of methods is used to detect the position of an element in the document. There's a little difference between them. The offset() method returns the position relative to the beginning of the body element, whereas position() returns the position relative to the beginning of the parent element. The value is returned as an object with the top and left properties.

Example #7

Let's style "ul li" so that margin-top is e.g. 50px, so we can see the difference.

$("ul li").css("marginTop", 50);

$("ul li").on("click",function() {
    let messages = [];
    messages.push("offset left: " + $(this).offset().left + ", top: " + $(this).offset().top);
    messages.push("position left: " + $(this).position().left + ", top: " + $(this).position().top);
    let message = messages.join("<br>");
    $("#messages").html(message);
});

The live demo:

Notice that the first item is 60px apart from the beginning of the body. The offset() was calculated as 10px margin from <ul> and 50px margin from <li>. The position of the item is 10px from <ul>, this value will be returned by the position() method.

 

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.