Results 1 to 6 of 6

Thread: Changing an attribute.

  1. #1
    Join Date
    Jun 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Changing an attribute.

    Hi,

    I really need help with this please, could anyone show me how I can change an attribute to a tag dynamically (like the "domroll script" for img but for example: class).

    this is what I want to do:

    I am using the iFrame SSI Script (http://www.dynamicdrive.com/dynamici...iframessi2.htm) to display data, and what I want to do is that when I click on the link (image) that's pointing to the Iframe and I want to change the "class" atribute of it and another img's classe on the same page, so there is 2 or more attribute changing in the same page.

    Could someone please help, and sorry for the english.
    Sincerily,
    José

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The way to change the class of an element is like so:

    Code:
    element.className='newClass'
    You can get the element in any valid way, the most common being its id, via getElementById('id') but, if it is an image, its name will do.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks,

    I will try that...

  4. #4
    Join Date
    Jun 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry,

    I'm not a programmer actually, I'm more a designer how sould I write this, a function, an if?

    Please...I'm sorry again

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, lets say you have two classes defined in a stylesheet like so:

    Code:
    .stlye1 {
    color:red;
    }
    
    .style2 {
    color:blue;
    }
    and you want to toggle them based upon which is active upon click for a given element:

    HTML Code:
    <span id="tog" class="style1" onclick="toggle();">Hi there! Click me!</span>
    Then you could have this function in a script block in the head:

    Code:
    function toggle(){
    var el=document.getElementById('tog');
    if (el.className=='style1')
    el.className='style2';
    else
    el.className='style1';
    }
    If you wanted to include another element:

    Code:
    function toggle(){
    var el=document.getElementById('tog');
    var el2=document.getElementById('tog2');
    if (el.className=='style1')
    el.className=el2.className='style2';
    else
    el.className=el2.className='style1';
    }
    There are many ways to work this out and the best/most appropriate method would depend upon your markup and exactly what you want to have happen but, that's the basic idea.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much, really appreciated.

    I'll work around with that...

    José

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
  •