www.webdeveloper.com
Results 1 to 5 of 5

Thread: How could an Element get the same css style of another?

Hybrid View

  1. #1
    Join Date
    Jan 2003
    Location
    Egypt
    Posts
    185

    How could an Element get the same css style of another?

    Hi,
    I have the following css rule that describes the style of an element with an id named as treeList:

    #treeList{
    color: #ffee00;
    width: 100%
    }

    Now I need jQuery to add this rule to another element with, of course, different id such as #fgsf:

    <div id="fgsf">
    //some text
    </div>

    Could jQuery able to apply the style rule of #treeList the other id element fgsf?
    Regards();
    return Said Bakr
    My Blog - Quran

  2. #2
    Join Date
    Jan 2011
    Location
    San Francisco
    Posts
    19
    I don't know much about jQuery, but couldn't this be done with css classes? Is there any reason you need to get the style specifically from another element? You can declare a class in your style tag:

    .thisClass{
    color:#ffee00
    width: 100%;
    }

    Then you can add it to any element in the HTML as follows:
    <div id='fgsf' class='thisClass'>

    or in the script if it's a dynamic element:
    document.getElementById("fgsf").className+="thisClass";

    Apparently jQuery also has addClass and removeClass functions. Hope this helps.

  3. #3
    Join Date
    May 2010
    Posts
    168
    The better option would be to write your css statement as a class instead of as an ID, unless you're having problems with specificity. If it has to be an ID, remember that IDs should be unique, so you should copy your definition and just give it a new id.

    As a good html rule, always try and code in the lowest specificity possible to achieve the effect you want, it will help keep your html maintainable.

  4. #4
    Join Date
    Jan 2003
    Location
    Egypt
    Posts
    185
    Hi,
    I needed this question because of I have a hierarchal menu list script maintained by jQuery for hide and display menu's elements in a PHP script. However, in some pages of the script, I have to deal with two menus. The menu skeleton is included in div with id = treeList, so selecting elements with the same id value should halt jQuery selecting, so I needed to dynamically change the id value with some suffix and then by some way set its css to be equaled to the #treeList set in the CSS file.

    However, I followed the approach of adding class attribute to the the div id #treeList and instead of selecting the div with the id alone I selected it using both id and class name, while class name is dynamically generated by the PHP as follows:
    <?php $suffix = rand(1,1000); ?>
    $('#treeList.<?php echo 'c'.$suffix;?>');

    <div id="treeList" class="<?php echo 'c'.$suffix;?>">
    //menu list
    </div>
    Regards();
    return Said Bakr
    My Blog - Quran

  5. #5
    Join Date
    May 2010
    Posts
    168
    so generate a tag param to handle the switching, and apply the CSS via a class.

    as a side note, I personally wouldn't use 'id' for this, instead add a 'data-' tag (so it stays html5 compliant). while either will technically work, I try to separate layout from interaction.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles