2

I have a simple situation. Here is the simplified CSS:

EDITED TO CLARIFY:

  #id2 .mycolor
  {
   color:white;                    
   background-color:red;
  }

  #id3 .mycolor
  {
   color:green;                    
   background-color:blue;
  }

  #id3:active
  {
   color:red;                    
   background-color:white;
  }

I want to dynamically apply these classes to other elements as in:

   $('some_element').addClass(???);

Of course I can define a new class which is a copy of the existing ones and use that name. Is there a way of reusing the class that is now tied to other elements or selectors without defining a new one and without having conflicts. For example, how can I dynamically add the class/style in #id2 .mycolor to one element and #id3 .mycolor to another element? Note they are different.

Also, I want the styles statically defined in the file. Not a JS to extract the current styles on the elements they are now associated it. The current style may not be the same as the one defined in the external CSS file. For example, getting $('#id2').css('color') may not return "white" for a whole bunch of reasons.

Sunny
  • 9,245
  • 10
  • 49
  • 79
  • You can use the same class as many times as you'd like, that's what classes are for, of course using the selector `#id .mycolor` sets the styles for classes inside that ID only – adeneo Jan 16 '14 at 17:52
  • Sorry... I did not explain my question precisely. Please see the edit. – Sunny Jan 16 '14 at 17:59
  • What you're asking for sounds strange, you can add more selectors to the css with a comma if you need the same styles for other elements, but there are many "gotchas", CSS specificity being a pain etc. – adeneo Jan 16 '14 at 18:01
  • I am just trying to reduce the CSS file. The other elements and their ids are dynamically generated. The logic is... if some criterion is satisfied use the class's style used to this element, else use the class/style on another element. Of course, I can get the CSS of the other elements dynamically too. That would be a whole different approach. – Sunny Jan 16 '14 at 18:05

2 Answers2

2

Edit according to new requirements - You can copy css styling between classes using the code below, 

function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}

function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
        }
    } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
            var l = css[i].split(": ");
            s[l[0].toLowerCase()] = (l[1]);
        }
    }
    return s;
}

Pass a jQuery object into css() and it will return an object, which you can then plug back into jQuery's $().css(), ex:

var style = css($("#elementToGetAllCSS"));
$("#elementToPutStyleInto").css(style);
:)

Source - Can jQuery get all CSS styles associated with an element?

Community
  • 1
  • 1
Rohan
  • 3,296
  • 2
  • 32
  • 35
  • Sorry... I did not explain my question precisely. Please see the edit. – Sunny Jan 16 '14 at 17:59
  • Very useful but not what I was looking for. I want a one-liner to go as an argument to the addClass method to pick up statically defined CSS styles assigned to some element. In the method identified by you,it will pick the dynamically current status of the CSS on the properties on that element at that time. For e.g. color in #id3 .mycolor is statically defined as "green" and I want that. JS may have changed it later and that is what the code you have provided will return. Possible that I am approaching my problem wrongly. Will accept ur answer if nothing else comes along. – Sunny Jan 16 '14 at 18:19
  • themosquitokiller Upvoted your answer anyway. Thanks – Sunny Jan 16 '14 at 18:21
  • 1
    @Samir For your requirements, this would be your best answer. – Rohan Jan 16 '14 at 18:35
  • Accepting your answer. Can you tell me if there is a way to pick css that is specified for an element's:hover or :active? See #id3:active{...} above. Thanks – Sunny Jan 16 '14 at 18:41
1

As you said, you just need to use addClass() method.

$('#element').addClass('myClass');

LIVING DEMO

Alvaro
  • 40,778
  • 30
  • 164
  • 336