Manipulating DOM CSS Properties Using jQuery

Advertisement

jQuery is a powerful development library for JavaScript followers. The functions themselves have been trimmed down and allow for agile development in fast-pace web pages. Some of the best features from jQuery come from Document Object manipulation.

This can include text elements, form fields, headings, images, and so much more. CSS properties can also be easily manipulated using just a few lines of jQuery. In this overview we’ll be going over some of the best features for DOM manipulation.

Much of the code is built around the newest version of jQuery which at the time of writing is 1.3.2. The library is backwards compatible for most functions so primary CSS manipulation shouldn’t cause any errors. If you have any questions check out the release documentation and page wiki.

Getters and Setters

Before jumping into code we should clear up some simple lingo. There are two main types of functionality we’ll be working with in manipulation functions. Getters are used to get any type of data and return some form of result. This can include dynamic data responses or complex algorithms.

city streets bright Manipulating DOM CSS Properties Using jQuery

Setters are in place to change or update the current value of a page element. DOM objects are often referenced through CSS from an ID or class name. jQuery uses the internal method .attr() to update the value of any element’s list of attributes. However it can also pull data from any element being used to just check the current value – this is both a setter and getter style method.

Among many of these methods are all 3 types. Combination functions are very useful since they provide response information and also hold the ability for document manipulation. CSS properties are some of the easiest to build upon and provide the most delicate environment for practice.

Dynamic Classes

The most popular method .addClass() is commonly seen in jQuery scripts. It can be useful to manipulate a page element and change its class on the fly. As a simple example consider a user removes a friend or deletes a message from their profile. You may then manipulate that entry in the list to change its class to “deleted” or “old”.

mobile phone platforms Manipulating DOM CSS Properties Using jQuery

This gives the animated effect of applying the action right after the user clicks. This can be done with a jQuery Ajax() call and simply apply an addClass() method towards the end of the return statement.

[sourcecode language="css"]$(‘p’).addClass(‘myclass secondclass’);[/sourcecode]

The function can also be used to affect many page elements at once. For example the code above targets all paragraph elements on the page and adds two different classes to them. The individual entries myclass and secondclass are separated by a space and delineated inside the addClass function.

Checking Classes

removeClass() is just the opposite and provides a self-explanatory effect. You are able to chain methods by removing a class from an element and also adding a new class onto the same object. This type of coding is very convoluted and proves to be a bit more distracting than useful.

Also in the same range is the .hasClass() method. This only requires a target parameter and will return a boolean value if the matched element(s) has a class or not. This can be extremely useful when looking to apply a new class onto elements and you’re unsure if they are already in place.

jquery function mapping Manipulating DOM CSS Properties Using jQuery

You may also have an interest in .toggleClass() which will add or remove classes based on the element’s current state. For example this could be used on a drop-down menu with an open and closed state. Check out the toggleClass documentation if you want to find out more uses.

Building Directly with CSS

If adding new classes isn’t really your style you may consider directly manipulating page objects with CSS. The .css() method is used to pull any property value from the selected object. This can be done multiple times by separating each query with a comma.

The shorthand writing passage for the CSS method also allows you to apply function code inside the parentheses. This code can parse complex maths and perform loops for data manipulation. Below is an example piece of code applying a few CSS properties to an element under the ID “myFirstElm”.

[sourcecode language="css"]$(‘#myFirstElm’).css( {width : ’30px’, height : ’10px’, color : ‘#000′} )[/sourcecode]

You may notice this is not the most elegant solution for CSS styles. It’s often much easier to write out the code in advance and save this as dormant styles in your global stylesheet. In this way you just need to switch classes to bring about the same effect as applying a multitude of properties as shown above.

mac setup digital Manipulating DOM CSS Properties Using jQuery

Much of the manipulation done with the CSS method can also be applied with other jQuery functions. If you’d like to delve into other tutorials a bit deeper check out our list of jQuery tutorials for an exclusive set.

HTML Elements

Each HTML element has internal contents based on its placement in the tree. The Document Object Model can be viewed as a hierarchy tree which shows the root nodes and all of their children.

With the jQuery .html() method you are able to directly pull all internal HTML from a block element. This is similar to each browser’s native innterHTML property with more dynamic features. With the html() method you are able to target any page element and pull/manipulate its contents from any event. This could be a button press, mouse over event, or anything similar.

Attributes

Each HTML element commonly has a few attributes associated with it. Even HTML and body tags are now seeing attributes with useful values added into pages.

jquery xhr request Manipulating DOM CSS Properties Using jQuery

With the powerful .attr() method you can both set and get attribute values. After targeting your jQuery element it’s important to realize which functionality you’re going to be using. By targeting just a single attribute name you can check to see if this is set on the current element and what its value is.

Below is sample code for adding an alt attribute to a simple page image. This code will work to either add a new alt tag or overwrite the current value. This is what gives jQuery so much power and shows what you can truly accomplish with a small library of manipulation functions.

[sourcecode language="css"]$(‘#pagePhoto’).attr(‘alt’, ‘Here is my image alt text’);[/sourcecode]

uphill city sun Manipulating DOM CSS Properties Using jQuery

Along with .attr() there are many other sample methods which can pull data about an element. .height() and .width() will pull the exact measurement of an object’s height and width at the time of calling a function. So if you have an expanding box you can create a for loop to output each length/width combo as it grows.

Conclusion

jQuery is an enormous library and it will require some time to scour all the information at hand. Not every function will prove to be useful to you so as a developer it’s important to pick and choose your favorites. Figure out which type(s) of functionality you prefer the most and practice building this through many different means.

The open-source nature of the project shows how quickly plug-ins can be built and added into code repos. Document manipulation has been around for years but has just recently broken into the spotlight with its ease of implementation. Most modern CMS packages will come out-of-the-box running jQuery or a similar JS library. By studying the basic functions ahead of time it will become much easier to adapt as a jQuery dev in the coming years.

Advertisement

There are 3 comments for this article
  1. Pingback: xhtml css templates – Manipulating DOM CSS Properties Using jQuery | Coding | PelFusion … | XHTML CSS - Style sheet and html programming tutorial and guides
  2. Pingback: 200+ Fresh and Really Useful Design and Web Development Articles - tripwire magazine

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>