Web Analytics Made Easy -
StatCounter How can I change a CSS style using a query string? - CodingForum


No announcement yet.

How can I change a CSS style using a query string?

  • Filter
  • Time
  • Show
Clear All
new posts

  • How can I change a CSS style using a query string?

    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;

    I need to change ID name '#link1' to '#link2', '#link3' etc.

    Any ideas?


  • #2
    I guess you're looking to highlight the 'current' link.

    Here's some previous CF thread s on the subject (searched using the forum's Google search facility)

    Why you should validate your code before asking for help...


    • #3
      Not exactly...

      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 a 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 for 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 menu’s downstate 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;

      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 menus working:



      • #4
        The problem is that the fragment identifier is a client-side thing and is not passed to the server. This means that a fragment identifier in the current url cannot be referenced by PHP.

        You could use javascript to reference the fragment identifier and subsequently highlight the currently viewed artist. The process would be simple enough.

        Given that it's only an enhancement effect and not critical to the usability or accessibility of the page, I would consider a js-based solution acceptible.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
        	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        	<style type="text/css">
        	ul.goodbye a.goodbye, 
        	ul.farewell a.farewell,
        	ul.auf_wiedersehen a.auf_wiedersehen,
        	ul.adieu a.adieu {
        		background: #fc3;
        	<script type="text/javascript">
        	window.onload = function() {
        	function prepArtistLinks() {
        		var artistList = document.getElementById('artists');
        		var artistsLinks = artistList.getElementsByTagName('a');
        		for (var i = 0, tA; tA = artistsLinks[i]; i++) {
        			tA.onclick = function() { hlCurrent(this.href) }
        	function hlCurrent(src) {
        		if (src.indexOf('#') == -1) return;
        		var tArtist = src.split('#')[1];
        		var artistList = document.getElementById('artists');
        		artistList.className = tArtist;
        <ul id="artists">
        	<li><a href="index.php#goodbye" class="goodbye">goodbye</a></li>
        	<li><a href="index.php#farewell" class="farewell">farewell</a></li>
        	<li><a href="index.php#auf_wiedersehen" class="auf_wiedersehen">auf_wiedersehen</a></li>
        	<li><a href="index.php#adieu" class="adieu">adieu</a></li>
        Why you should validate your code before asking for help...