current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

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.

share|improve this answer
    
That last paragraph is exactly what I was looking for! –  Celeritas Feb 6 '13 at 1:41
    
It's no longer the last paragraph, but, cool :) –  Halcyon Feb 6 '13 at 1:44
    
@Celeritas - also ask yourself why it's green and why it changes to red, and pick your class names based on those reasons (class="green" is a travesty!) ... you could have id="author" class="selected" and rule that says #author.selected { color:#FF0000; } –  Stephen P Feb 6 '13 at 1:46
    
@StephenP that is indeed really good advice. Name your classes after the thing they indicate; not the effect they give. If you change your color palette at some point the class names might look silly and that's bad for understanding and general code quality. –  Halcyon Feb 6 '13 at 1:50
add comment
up vote 0 down vote

There is more than one way to change the styling of an HTML element. If using jQuery, for instance, you can add/remove class names to elements easily, like so:

$("div").addClass("className");
share|improve this answer
add comment
up vote 0 down vote

It is always cleaner to define all your styles in classes so you can change the whole application look and feel easily instead of using inline styles.

the easiest way to do so is to define a CSS class

.reddiv {color: #FF0000}

then you can easily change the color of the div to red using jquery

$('#author').addClass('reddiv');
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.