Can jQuery get all CSS styles associated with an element

Question

Is there a way in jQuery to get all CSS from an existing element and apply it to another without listing them all   I know it would work if they were a style attribute with attr    but all of my styles are in an external style sheet

User · Accepted Answer

A couple years late  but here is a solution that retrieves both inline styling and external styling   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

User · Answer

Two years late  but I have the solution you re looking for  Not intending to take credit form the original author  here s a plugin which I found works exceptionally well for what you need  but gets all possible styles in all browsers  even IE   Warning  This code generates a lot of output  and should be used sparingly  It not only copies all standard CSS properties  but also all vendor CSS properties for that browser   jquery getStyleObject js         getStyleObject Plugin for jQuery JavaScript Library    From  http   upshots org  p 112       function           fn getStyleObject   function            var dom   this get 0           var style          var returns               if window getComputedStyle               var camelize   function a b                   return b toUpperCase                               style   window getComputedStyle dom  null               for var i   0  l   style length  i  lt  l  i                     var prop   style i                   var camel   prop replace   -  a-z   g  camelize                   var val   style getPropertyValue prop                   returns camel    val                             return returns                     if style   dom currentStyle               for var prop in style                   returns prop    style prop                              return returns                     return this css             jQuery     Basic usage is pretty simple  but he s written a function for that as well     fn copyCSS   function source       var styles     source  getStyleObject        this css styles       Hope that helps

User · Answer

I had tried many different solutions  This was the only one that worked for me in that it was able to pick up on styles applied at class level and at style as directly attributed on the element  So a font set at css file level and one as a style attribute  it returned the correct font   It is simple   Sorry  can t find where I originally found it     -- html object var element   htmlObject    e g document getElementById   -- or jquery object var element   htmlObject 0     e g   selector   var stylearray   document defaultView getComputedStyle element  null   var font   stylearray  font-family     Alternatively you can list all the style by cycling through the array  for  var key in stylearray    console log key          stylearray key

User · Answer

marknadal s solution wasn t grabbing hyphenated properties for me  e g  max-width   but changing the first for loop in css2json   made it work  and I suspect performs fewer iterations   for  var i   0  i  lt  css length  i    1        s css i     css getPropertyValue css i        Loops via length rather than in  retrieves via getPropertyValue   rather than toLowerCase

User · Answer

Why not use  style of the DOM element   It s an object which contains members such as width and backgroundColor

[javascript] Can jQuery get all CSS styles associated with an element?

Examples related to javascript

Examples related to jquery

Examples related to css