javascript change span color

Posted on 2007-11-24
Medium Priority
Last Modified: 2010-08-05
I only know a span can be given an id. How can  its color be changed in javascript?
Question by:ksfok
  • 2
LVL 54

Accepted Solution

b0lsc0tt earned 1000 total points
ID: 20344209

The background color can be changed with ...

document.getElemementById('theSpan').style.backgroundColor = 'red';

Let me know if you have any questions or need more information.

LVL 17

Assisted Solution

gops1 earned 1000 total points
ID: 20344621
Some different ways to change span color:
		<title>Script Demo Gops&reg;</title>
			body, input, div, a, span{font-family:verdana;font-size:11px;}
		<script language="javascript">
			function changeColor() {
				var o = document.getElementById('btnClick');
		<span id="coCSS">I am a Span I am colored with CSS</span>
		<span id="coClick" onclick="this.style.backgroundColor='#D5FF00'">I am a Span Click me to change color</span>
		<span id="btnClick">I am a Span, change my color by clicking on [CHANGE COLOR] button</span>
		<input type="button" onclick="changeColor()" value="CHANGE COLOR">

Open in new window

LVL 54

Expert Comment

ID: 20417367
I'm glad I could help.  Thanks for the grade, the points and the fun question.


Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question