jQuery 1.3 : Effects - Inline CSS modification

.css('property','value')
.css({property1: 'value1', 'property-2': 'value2'})

Experienced JavaScript developers will recognize these jQuery maps as JavaScript object literals.

We use the .css() method the same way we've been using .addClass()—by chaining it to a selector and binding it to an event.

<div id="switcher">
<div class="label">Text Size</div>
<button id="switcher-default">Default</button>
<button id="switcher-large">Bigger</button>
<button id="switcher-small">Smaller</button>
</div>
<div class="speech">
<p>Fourscore and seven years ago our fathers brought forth
on this continent a new nation, conceived in liberty,
and dedicated to the proposition that all men are created
equal.</p>
</div>

By linking to a stylesheet with a few basic style rules, the page can initially look like the following screenshot:

In this version of the style switcher, we're using<button> elements. Clicking on the Bigger and Smaller buttons will increase or decrease the text size of<div class="speech">, while clicking on the Default button will reset<div class="speech"> to its original text size.

If all we wanted were to change the font size a single time to a predetermined value, we could still use the .addClass() method. But let's suppose that now we want the text to continue increasing or decreasing incrementally each time the respective button is clicked. Although it might be possible to define a separate class for each click and iterate through them, a more straightforward approach would be to compute the new text size each time by getting the current size and increasing it by a set factor (for example, 40%).

Our code will start with the $(document).ready() and $('#switcher-large').click() event handlers:

$(document).ready(function() {
$('#switcher-large').click(function() {
});
});

Next, the font size can be easily discovered by using the .css() method: $('div.speech').css('fontSize'). However, because the returned value will include a trailing'px', we'll need to strip that part in order to perform calculations with the value. Also, when we plan to use a jQuery object more than once, it's generally a good idea to cache the selector by storing the resulting jQuery object in a variable as well.

$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher-large').click(function() {
var num = parseFloat($speech.css('fontSize'), 10);
});
});

The first line inside $(document).ready() now stores a variable for<div class="speech"> itself. Notice the use of a $ in the variable name, $speech. Since $ is a legal character in JavaScript variables, we can use it as a reminder that the variable is storing a jQuery object.

Inside the .click() handler, we use parseFloat() to get the font size property's number only. The parseFloat() function looks at a string from left to right until it encounters a non-numeric character. The string of digits is converted into a floating-point (decimal) number. For example, it would convert the string'12' to the number 12. In addition, it strips non-numeric trailing characters from the string, so'12px' becomes 12 as well. If the string begins with a non-numeric character, parseFloat() returns NaN, which stands for Not a Number. The second argument for parseFloat() allows us to ensure that the number is interpreted as base-10 instead of octal or some other representation.

All that's left to do, if we are increasing by 40%, is to multiply num by 1.4 and then set the font size by concatenating num and'px':

$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher-large').click(function() {
var num = parseFloat($speech.css('fontSize'), 10 );
num *= 1.4;
$speech.css('fontSize', num + 'px');
});
});

Now when a user clicks on the Bigger button, the text becomes larger. Another click, and the text becomes larger still, as shown in the following screenshot:

To get the Smaller button to decrease the font size, we will divide rather than multiply&mdash;num /= 1.4. Better still, we'll combine the two into a single .click()<button> elements within<div id="switcher">. Then, after finding the numeric value, we can either multiply or divide depending on the handler on allID of the button that was clicked. Here is what that code looks like now:

$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
if (this.id == 'switcher-large') {
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + 'px);
});
});

It's also nice to have a way to return the font size to its initial value. To allow the user to do so, we can simply store the font size in a variable immediately when the DOM is ready. We can then use this value whenever the Default button is clicked. To handle this click, we could add another else if statement. However, perhaps a switch statement would be more appropriate.

$(document).ready(function() {
inline CSS modificationsbutton elements usedvar $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.css('fontSize', num + 'px');
});
});

Here we're still checking the value of this.id and changing the font size based on it, but if its value is neither'switcher-large' nor'switcher-small' it will default to the initial font size.