SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the CSS for a certain tag with JS?

    I have a page that's all done in JavaScirpt and CSS, it's a single page with "tabs" that show different data, my question is how can I change the CSS for say, all the "a" tags on the page?

    Code:
    function mt(id) {
      	var space = new Array(0, 0, 176, 154, 132, 110, 88, 66, 44, 22);
     	var links = new Array("9a9a9a", "be3509", "c80851", "4f9707", "cebc00", "09629e", "e3b000", "6b9702", "881ca3", "e93a03");
      	var menu = document.getElementById("menu");
      	
      	menu.style.backgroundPosition = "0px "+space[id]+"px";
      	
      	for (var i = 1; i <= 9; i++) {
      		if (i == id) {
     			document.getElementById("tab"+i).style.display = "block";
      			// change <a> tags font color to links[id]
      		} else {
     			document.getElementById("tab"+i).style.display = "none";
      		}
      	}
      }
    I want to get it so if the id equals 2 then it changes all the links font color to links[2]. The reason I'm doing this is because all the "tab#" have a different color background and I want the links to be in the same color group. Is this possible?
    - the lid is off the maple syrup again!

  2. #2
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var TabAtags=document.getElementsByTagName('a')
    
    for(i=0;i<tTabAtags.length){
    TabAtags[i].className="newclassname"
    }

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SpaceFrog
    Code:
    var TabAtags=document.getElementsByTagName('a')
    
    for(i=0;i<tTabAtags.length){
    TabAtags[i].className="newclassname"
    }
    If the links have other classes you may overwrite them with this script. Be careful (unless that's the intended effect ).

  4. #4
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, that worked like a charm.
    - the lid is off the maple syrup again!

  5. #5
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    If the links have other classes you may overwrite them with this script. Be careful (unless that's the intended effect ).
    Quick question, what would be the best way to overwrite the links that already have classes? I just want the "classless" to have the new class when I run the function. I came up with this but I don't know if it's the best way.

    Code:
    function mt(id) {
       	var atag = document.getElementsByTagName("a");
       	for (var j = 0; j < atag.length; j++){
       		atag[j].className = "link"+id;
       	}
       	for (var j = 1; j <= 9; j++) {
       		document.getElementById("l"+j).className = "link";
       	}
     }
    All my menu links have their own ID (l1, l2, l3 and so on) is this ok for what I want? Sorry, I'm a PHP guy, I'm not that great with JavaScript.
    - the lid is off the maple syrup again!

  6. #6
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scratch that last post, I got it so it just looks past all a tags already with a class.

    Code:
      function mt(id) {
      	var atag = document.getElementsByTagName("a");
      	for (var j = 0; j < atag.length; j++) {
      		if (atag[j].className == "") {
      			atag[j].className = "link"+id;
      		} else {
      			atag[j].className = atag[j].className;
      		}
      	}
      }
    - the lid is off the maple syrup again!

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need the else:
    Code:
      function mt(id) {
      	var atag = document.getElementsByTagName("a");
      	for (var j = 0; j < atag.length; j++) {
      		if (atag[j].className == "") {
      			atag[j].className = "link"+id;
      		}
      	}
      }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •