Question

When using JavaScript to change the CSS does the JavaScript simply make new inline-CSS which takes presidents? I’ve always felt inline CSS is trashy and was wondering if there’s a better way?

For example if you have

<div id="author">Author's name</div> which is normally coloured green from a reference to an external CSS and you want to change it to red must you use

document.getElementById('author').style.color='#FF0000'

Must changes to appearance be done using inline-stying?

Answer 1

No, you’re not modifiying the CSS. You’re just setting style properties. The mark up of an element is decided by three things: CSS, style and inline properties like width="100". The order in which they are applied can get a little fuzzy.

style does always overrule CSS though, unless you’re using !important.

A more common way to change the mark up of elements is to add and remove classes. This allows you to keep all your style definitions in your CSS file and makes your code considerably less complex.

You could do:

document.getElementById('author').className = "selected";

to add a class to it and have it be display in a different mark up.

If you’re using jQuery you can use addClass and removeClass. Under the hood this just modifies the className property. It’s easy enough to write your own implementation, you just need to do some string juggling.