Change color inline with javascript

Question

Is there a way using javascript and HTML to change the color of a span? For example:

<span onLoad="document.getElementById('test').style.color = 'red';" id="test">test</span>

But that doesn't seem to work.

Quick update: This is just a precursor to the actual problem that I'm trying to solve. Basically I'm inside a CMS that only allows for in place HTML editing. That means that I don't have access to the head to add custom javascript functions etc. What I'm trying to do is make an inline function that takes the date specified (in a span for example) and then colorizes it based on some in-line js logic.

@js1568 This is just a precursor to the actual problem that I'm trying to solve. Basically I'm inside a CMS that only allows for in place HTML editing. That means that I don't have access to the head to add custom javascript functions etc. What I'm trying to do is make an inline function that takes the date specified (in a span for example) and then colorizes it based on some in-line js logic. — bswinnerton
– bswinnerton, Commented Dec 11, 2012 at 20:35
@bswinnerton You do know that the header is not the only place you can place script tags (in fact its generally recommended to place your script tags on the bottom of your page) — Jack
– Jack, Commented Dec 11, 2012 at 20:37

bfavaretto · Accepted Answer · 2012-12-11 20:44:17Z

3

Spans do not have an "onload" event. If you want to run that when the page loads, add a script block on the <head> with the following code:

window.onload = function() {
    document.getElementById('test').style.color = 'red';
}

Considering your clarification about not having access to the header: you can add a <script> block anywhere below the elements you're targeting, and it works. If possible, add a single script block before </body> (or as far down as possible). Another possibility is just adding a class from the CMS editor, and define that class on an external CSS file. Yet another possibility are inline CSS styles, as suggested on defau1t's answer.

edited Dec 11, 2012 at 20:44

answered Dec 11, 2012 at 20:31

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Alpha · Accepted Answer · 2012-12-11 20:32:28Z

2

If you have any reason for not using css and want to use JavaScript then you can use

window.onload=function(){
    document.getElementById('test').style.color = 'red';
}

answered Dec 11, 2012 at 20:32

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Comments

defau1t · Accepted Answer · 2012-12-11 20:35:31Z

1

onload event is defined for body, not DOM elements. You can use document.getElementById("test").style.color = "red";

OR simple use:

<span id="test" style="color:red;">test</span>

answered Dec 11, 2012 at 20:35

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

Change color inline with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related