click a link to change css

**james438** · 01-30-2011, 02:55 AM

Hi, I am looking for a bit of sample javascript where if I click on an anchor link the background color of the div will change to a predetermined color. For example, if I load the page, div will be blue, but when I click the link it will become red.

My goal is to build upon this code to create a dynamic page that I can "paint". Later, I hope to add other possibilities as well, such as the ability to alter font families or background images.

**Beverleyh** · 01-30-2011, 09:28 AM

Hi James,

You can use jQuery;

Code:

$('a.change').click(
      	function () {
		$('div.paint').css({'background':'red'});
     	}
    );

Sample HTML

Code:

<a href="#" class="change">Click to change colour</a>
<div class="paint"></div>

**vwphillips** · 01-30-2011, 09:53 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script  type="text/javascript">
/*<![CDATA[*/

function Color(id,col){
 document.getElementById(id).style.backgroundColor=col;;
}
/*]]>*/
</script>

</head>

<body>
<a name="tom" onclick="Color('d1','red');">Anchor</a>

<div id="d1" style="width:200px;height:200px;background-Color:blue;" ></div>

</body>

</html>

**james438** · 01-30-2011, 02:09 PM

Thanks, this does give me something to look at. I really do not work with javascript and can not create even the simplest scripts on my own.

Beverly, I am having a little bit of difficulty getting your script to work. If I remember correctly, jQuery is based on a library of javascript functions. I wrapped your javascript in typical javascript tags: <script type="text/javascript"> and incorporating it into what vwphilips wrote, but am not having any luck. Would you be able to help me out a bit further?

**djr33** · 01-30-2011, 02:39 PM

To use jquery you need the jquery script on your page. It is not a default.

You don't need jquery though. It just simplifies the code a bit.

**vwphillips** · 01-30-2011, 04:28 PM

It just simplifies the code a bit

how?

plus the posted code is .5k where jQuery.min is 77K in size

and much better to learn javascript before jQuery

**Nile** · 01-30-2011, 06:37 PM

Originally Posted by vwphillips

how?

plus the posted code is .5k where jQuery.min is 77K in size

and much better to learn javascript before jQuery

You should not use jQuery without knowing javascript - correct.
And I agree, jQuery will be more complicated at times when all thats needed is one line of simple javascript.

**james438** · 01-30-2011, 06:44 PM

In this case, I am going to go with vwphillips. It is better to learn javascript before trying to utilize the jQuery library. It seems to me that the jQuery is analogous to using a website creator before learning some of the basic languages.

Even so, how do you use the jQuery library, just for future reference?

**Beverleyh** · 01-30-2011, 07:00 PM

If you know javascript, youre at an advantage and it will be easy to write the code you need - unfortunately I dont so I just suggested what I know from fiddling with jQuery, which for me was much easier to get my head around than starting with javascript from scratch (is that bad?). Maybe now if I go back and start looking at javascript, it will be easier for me but sadly I havent got time to do that at the mo.

James, as an alternative to Vic's suggestion (which is smaller so by all means go with that if you prefer) you can first download and link to the jQuery library in the head of your page (download: http://docs.jquery.com/Downloading_jQuery ) and then use the function as suggested earlier;

Code:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.change').click(
      	function () {
		$('div.paint').css({'background':'red'});
     	}
    );
});
</script>

(HTML as before)

**james438** · 01-30-2011, 07:40 PM

Thanks for explaining Beverly. I have tried a few times in the past to learn javascript, but was intimidated by it and have so far had no reason at all to learn it. At the moment I have one reason in which it might be advantageous to learn it, which is to try and create a website design program for the admin section of my website.

Thread: click a link to change css

Thread Tools

Search Thread

click a link to change css

Bookmarks

Bookmarks

Posting Permissions