Copy CSS style from an element and pass it to other element, jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html> <head> <style> .box1 { background-color:black; color:red; line-height:50px; padding:20px; } button #copyCSS{ margin:10px; padding:20px; } </style> <script type= "text/javascript" > $(document).ready( function (){ $.fn.getCSS = function (style) { var self = this , obj = {}; $.map(!$.isArray(style) ? style = style.split(‘ ‘) : style, function (key) { obj[key] = self.css(key); }); return obj; }; var cur = $(‘.box1’).getCSS(‘backgroundColor line-height color padding’); $( "#copyCSS" ).click( function (){ $(‘.box2’).css(cur); }); }); </script> </head> <body> <div class = " box1" >Box1</div> <button id= "copyCSS" > Copy CSS properties from Box1 to Box2</button> <div class = " box2" >Box2</div> </body> </html> |
23 Related pages
- About jQuery
- AJAX Introduction
- Copy CSS style from an element and pass it to other element, jQuery
- Dark Light Mode website, jQuery
- if the window size is bigger than 1000px do stuff. jQuery
- Include CDN jQuery
- jQuery Checkbox if else
- jQuery input radio button
- jQuery library included locally
- jQuery Limited interval
- jQuery localStorage explained
- jQuery Next and Prev element addclasses
- jQuery Radio button enable input
- jQuery Refresh the page to change the background-colour
- jQuery Screen size of this device in px
- jQuery setInterval, On page load
- jQuery Start / Stop interval
- jQuery Start interval with start button
- jquery Tick box to enable a button
- jQury plugin form validation
- Jump to Section in page, Distance to the top page, Smooth scroll
- setTimeout, jQuery
- Table Search with jQuery Misc