SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    apply CSS class to a link with "setAttribute"??

    I need to apply a CSS class to a link on the fly.

    I wrote a function:

    Code:
    function f(variabl)
    {
      var i, lnk;
    
      for(i=0; (lnk = document.getElementsByTagName("a")[i]); i++)
      {
      if(lnk.getAttribute("name").indexOf("xy") != -1)
    	{
           if(lnk.getAttribute("name").indexOf(variabl) != -1)
    		{
    		lnk.setAttribute("class","className");
    		result = lnk.getAttribute("class");
    		alert(result);break;
    		}
    	}
      }
    }
    What I do is probe a bunch of links, "xy" is a string appearing in the names of the link 'family' I'm interested in (it could be "id" instead of "name");

    "variabl" is a unique string contained in the name of the one link I want to manipulate.

    Once I have the right link I apply the class (named "className" in this example).

    "result" and "alert" are to check that it works, and it does: alert() gives me the name of the class I applied.

    But the link doesn't care, and stays the same except in Netscape6 and Opera7 (PC).

    I've tried with "document.links", same problem.

    So if anyone knows what could be going on here I'd really appreciate.

    PS: There's another way of doing this:

    Code:
    function f(variabl)
    {
      var i, lnk;
    
      for(i=0; (lnk = document.getElementsByTagName("a")[i]); i++)
      {
      if(lnk.name.indexOf("xy") != -1)
    	{
    	if(lnk.getAttribute("name").indexOf(variabl) != -1)
    		{
    		l = lnk.style;
    		l.backgroundColor="#fff";
    		l.color="#333";
    /* etc etc etc etc etc etc etc etc etc: the rest of the rules */
    		break;
    		}
    	}
      }
    }
    but when the class has many rules it seems silly and unelegant to do it this way. Plus I'd really like to know what's happening here

    Thanks for your help

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Why are you using [object].setAttribute for a class when you can just use [object].className instead?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean in my example:

    Code:
    lnk.className;
    It doesn't work (not even in N6 and Opera)

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually stripped the page of everything else, put the function and the class in the "head" section, it doesn't work either way.

    And I agree with you, vgarcia, [object].className is what comes to mind.

    Maybe some invisible weird characters that interfere with the code? Im using Wordpad, but rewriting the function in Notepad did not help... I'm beginning to see ghosts here, I've been on this thing for a few hours and just don't understand how it can not work.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using lnk.className works for me in IE6 on Win2K.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike,

    I'm on WinME myself, and I re-tested everything again:

    - lnk.className: nothing whatsoever;

    - setAttribute: works in Netscape 6, Opera 7.

    Other browsers I tested: IE 5.0, 5.5, 6; Netscape 7.1, Mozilla, Firebird.

    I'm using this thing onload; tried firing it with a click on a link with the same lack of success.

    Think I'll go with the other solution.

    Actually, I've always found links more difficult to access than other elements for some reason. For instance, I recall sometimes giving up reaching a link thru its name, and resorting to use its z-index instead --tried that here, no luck.

    Thanks anyway.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We need to all be looking at the same test page. Is your page online?

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a simplified version, just document.links and [object].className

    http://

    and it still doesn't work on any of some seven browsers I use for testing
    Last edited by pietro; Jun 16, 2007 at 04:43.

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you made a typo there. In the inner "if" you had:
    Code:
    lnk.curPg;
    I changed that to:
    Code:
    lnk.className += 'curPg';
    and it works for me.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks !!!

    It wasn't a typo, I was using className as a substitute for the actual class name!

    So, much ado about nothing.

    Thanks, it now works for me too of course.
    Last edited by pietro; Jun 16, 2007 at 04:46.


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
  •