Easy JavaScript: change your CSS styles with no functions needed

Mary Dean

After you have invested some time in learning HTML and CSS, you might be overwhelmed by the prospect of ALSO learning Javascript. Luckily, there are lots of things you can do with Javascript without actually knowing it. One easy win is manipulating the HTML and CSS you've already written. Anything you can do with a style sheet, you can change with Javascript. And you don't even have to write a function. You can copy and paste a short snippet of code into an anchor or button tag... it's not the 'right' way, but it works.

For example, here is a style called "#crazy" with a font-color of red. Click the words underneath to change its color:

#crazy {

Do You Think I'm Psychedelic?


This is what my GREEN anchor looks like:

<a href="javascript:crazy.setAttribute('style','color:green');">GREEN</a>

Without knowing a lick of Javascript, you could modify that snippet to alter any style attribute in your entire document. Just be careful with your quotation marks -- singles and doubles are interchangeable, but still monogamous, so to speak.

Here is the PURPLE script. I've added both a positive and a negative text-shadow, which gives it that "Do I need glasses?" effect.

<a href="javascript:crazy.setAttribute('style','color:purple; font-style:italic; font-weight:bold; text-shadow:2px 2px orange,-2px -2px lime');">PURPLE</a>

And here is the RAINBOW text-shadow. It may be tacky, but it illustrates the fact that you can have multiple text-shadows, separated by commas. You have to make each one bigger than the last. They don't stack like pancakes, they expand like drops of food-coloring.

<a href="javascript:crazy.setAttribute('style','color:red;font-weight:bold;font-variant:small-caps;letter-spacing:0.3em;text-align:center;text-shadow:2px 2px 0 orange, 4px 4px 0 yellow, 6px 6px 0 lime, 8px 8px 0 blue, 10px 10px 0 mediumpurple');">RAINBOW</a>

To be continued:

One of the most common uses of this technique would be to make something visible or invisible...

You can change the styles inside a class or ID, or you can change classes and IDs...

You can change background images...