How do I change a CSS style using a query string

jim28100 · #1 (**permalink**) Oct 10th, 2006, 13:43

Can anyone tell me how to change the name of an on-page CSS style using a 'query string' on the end of a URL.
This is the CSS that's in the <HEAD> of each page.
<style type="text/css">
#link1 {
background-color: #D7EBB0;
}
</style>
I need to change ID name '#link1' to '#link2', '#link3' etc.
Any ideas?
Jim

ukgeoff · #2 (**permalink**) Oct 10th, 2006, 22:54

Can you explain a bit more what it is you are trying to do. It may be that you are looking to use the DOM to change the style but I need more info.

jim28100 · #3 (**permalink**) Oct 11th, 2006, 09:43

Thanks Geoff,

Okay, here’s what I’m trying to do and why…

I am building an art gallery website.

Firstly, each of my pages has a side menu. The same menu is used on multiple pages and is brought in via a simple PHP ‘Include’ statement. Each of the menu’s mouseOver and mouseOut states are controlled via an external CSS file.

Because the menu exists as a separate file I cannot show the downstate in the convensional way. To get around this, I hard-code the ‘downstate’ for each page using an ‘on-page’ CSS style in the <HEAD> of each page. This not only sets the background colour but also is used as a unique page identifier on the menu. I.e. id=”#link1” for page one,
id=”#link2” for page two etc. etc.

Here is the rub – The above works fine as it stands because each artist would normally have their own page. However, in the ‘current exhibition’ page there will be more that one artist on the same page. Visitors will be able to select which artist’s work they wish to go to from an 'exhibitions' menu listing all of the artists. I will do this using a URL + ‘text anchor’ to target an artist’s work within the page. However, I’d like to show the selected artist’s name as active depending on whichever of the URL + ‘text anchor’ links were selected on the menu. At present I can only show the downstate for the page as a whole rather than changing the 'exhibition' menu downstates depending on which artist was selected for the same page.

I’m hoping I could do this by using a ‘query string’ at the end of the link address to change the ID ‘class’ name of the on-page CSS?

Below is the on-page CSS I currently use to identify each page’s downstate and the code it triggers on the menu.

Local <HEAD> CSS code
<style type="text/css">
#link1 {
background-color: #D7EBB0;
}
</style>

This would be the link it would trigger in the ‘included’ menu

<td id="link1" width="100%" height="18" onMouseOver="pviiClassNew(this,'overState')" onMouseOut="pviiClassNew(this,'outState')"><a href="banks.php" onFocus="if(this.blur)this.blur()">Michael Banks</a></td>

Sorry if this is long-winded but everyone I’ve spoken to seems to think that I’m having trouble showing a single, fixed downstate.

Here is the URL of my test site showing the above code working for the 'artists' menu. I've still yet to build the 'exhibitions' menu:
http://www.contemporary-art-holdings.co.uk/testarea/banks.php

I’m very new to this so please be gentle.

Jim

ukgeoff · #4 (**permalink**) Oct 13th, 2006, 17:38

Hi Jim,

Sorry for the delay in getting back to you. Has things on and one evening I was just to tired to concentrate.

First things first - you need to get your pages validated. You need a DOCTYPE at the top of your pages then you can validate using the W3C validation facility to fix the other issues.

I urge you to rethink your page layout code. Get rid of all that table structure in favour of a greatly simplified div structure and css.

The menu system is over-coded as well. Can't see why you need all that JavaScript onmouseover, onmouseout & onclick stuff.

I'm not clear what you mean when you talk about the 'downstate'.

You can change an element(s) style on the fly using JavaScript as long as the element(s) in question can be identified.

Example snippets not code order correct:

Code: Select all

.style1 {
  color: red;
}

<p id='colouredtext' class='style1>This is red text</p>

function makeMeGreen {
   document.getElementByID('colouredtext').stylecolor = 'green';
}

When the page is initially displayed, the text will be red. When via whatever mechanism the function is called, the text will turn green.

This is obviously a simplistic bit of code but it gives you the idea.

QuikFrozen · #5 (**permalink**) Oct 15th, 2006, 04:45

If you are using a query string, I assume you're writing your page on a server side language. There's no problem there, just change whatever you want.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Change a string of characters with aonether in a HTML file	r3ticul	JavaScript Forum	4	Jan 21st, 2008 09:28
[SOLVED] Simple Question: Why does Font Style change on Web Page in different Browse	BlackReef	Web Page Design	11	Dec 7th, 2007 09:39
How to tell IE7 to use a pariticular style in a single style sheet	figo2476	Web Page Design	5	May 25th, 2007 14:23
Automatically change query string variables back to normal	kaligula1234	PHP Forum	7	Apr 13th, 2006 18:59
change style sheets	screamer2k	Web Page Design	5	Aug 6th, 2004 11:19

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
How do I change a CSS style using a query string