Using unobtrusive Javascript you can simply change content and styles on your page without returning to the server. Done right you can also keep it accessible and maintainable.

Table of contents

This is the third in a series of articles about my experience of Learning Javascript. I am a beginner at learning Javascript, although I am a proficient XHTML and CSS coder. These articles are meant to help others like me learn so if you don’t understand anything or have any insight to offer please chip in.

This article covers switching content and changing styles on the fly using Javascript. For me this is an extremely powerful facet of Javascript. You hook into both XHTML and CSS to produce something that transcends the capability of CSS and XHTML on their own. Gradually I am seeing what all the fuss is about. Used correctly Javascript can greatly enhance user experience.

What we want to achieve

In this example I’ve supposed there is some very important content on a page that we really want users to read. The idea is that if the text is not clear enough to users then they click a link and it is enlarged with a stronger contrast. This method would also work for a basic show and hide too.

Here’s what we want to do:

When a user clicks the trigger link switch the style of div containing the important content

Then change the link text to allow the user to return to the low contrast version

If the user clicks the link again switch the style of the div back to the low contrast version

Then change the link text to the user to return to the high contrast version

If Javascript is turned off we take the user to a page with the high contrast version on it, so it is the best of both worlds.

Changing the name of a class

Using Javascript you can change the name of a class within your document by finding the element via the DOM and then using element.className = “your-class”. This sets the class name so it will override any style that is already set. All pretty simple really and can obviously have a lot of uses. You will of course need to specify the styles that you want in your stylesheet.

Switching text

It is also quite straightforward to change the text. Using the DOM you can be as precise as a surgeon in finding the element and content you want to change. In this example we want to find an a tag within a paragraph tag and then change the text. In terms of the order we want to:

Find the element we want to target. We can do use getElementById to find this.

Navigate to the link within the target. This happens to be the first child so we can use firstChild.

Now we are in the link we want to change the text. We use nodeValue for this.

The function below is crude but shows how you can switch both content and styles using the methods described above. It is also very cross browser friendly (tested browsers given after the function). Hopefully you should be able to follow the comments. Again I’m using Simon Willison’s addEvent to make sure the function is ready when the page has loaded.

Tags

Recent Posts

Using HashiCorp Vault with LDAPHow to use HashiCorp Vault to setup an LDAP backed secret store with read-only access for users in groups and read-write access for specific users

Linux and Unix xargs command tutorial with examplesTutorial on using xargs, a UNIX and Linux command for building and executing command lines from standard input. Examples of cutting by character, byte position, cutting based on delimiter and how to modify the output delimiter.

Copy a file in GoHow to copy a file in Go. The ioutil package does not offer a shorthand way of copying a file. Instead the os package should be used.

About the author

George Ornbo is a hacker, futurist, blogger and Dad based in Buckinghamshire, England.