SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Kingston
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.getElementById

    Hi ,

    I have a page where there may be multiple instances of
    Code:
    <span id="highlight">some content</span>
    and I want to be able to dynamically change how those span elements are displayed by doing something like
    Code:
    if (document.getElementById("highlight")) {
    document.getElementById("highlight").style.fontFamily = 'Verdanda';
    document.getElementById("highlight").style.fontWeight = 'bold';
    document.getElementById("highlight").style.color = '#8A5353';
    }
    but the problem is this only changes how the first one is displayed. How would I get it to change all elements named highlight?

    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)
    There should only be one element that has an ID of "highlight". An ID is supposed to be unique (think about a primary key in a database or a government-issued ID number). Consider changing your IDs to classes and using this function instead:
    Code:
    function highlightWords()
    {
     var s = document.getElementsByTagName("SPAN"), i=0, current;
      while (current = s[i++])
      {
        //see if "highlight" is in the span's class
        if (/\bhighlight\b/i.exec(current.className))
        {
           s.style.fontWeight = 'bold';
           s.style.fontFamily = 'verdana';
           s.style.color = '#8a5353';
        }
      }
    }


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
  •