Created
April 24, 2015 05:33
-
-
Save maneja81/6ca4f168281a3af695b7 to your computer and use it in GitHub Desktop.
jQuery get css rules of DOM Element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #test{ | |
| background: #222; | |
| color: #fff; | |
| padding: 25px; | |
| font-family: 'Open Sans', Arial; | |
| line-height: 1.6; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="test"> | |
| <p>CLick Me and check console to know my CSS ;)</p> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| $(document).ready(function() { | |
| var css2json = function(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; | |
| }; | |
| var css = function(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; | |
| }; | |
| $('#test').on('click', function(){ | |
| var css_rules = css($(this)); | |
| console.log('My CSS Rules Are: ', css_rules); | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="test"> | |
| <p>CLick Me and check console to know my CSS ;)</p> | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">#test{ | |
| background: #222; | |
| color: #fff; | |
| padding: 25px; | |
| font-family: 'Open Sans', Arial; | |
| line-height: 1.6; | |
| text-align: center; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() { | |
| var css2json = function(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; | |
| }; | |
| var css = function(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; | |
| }; | |
| $('#test').on('click', function(){ | |
| var css_rules = css($(this)); | |
| console.log('My CSS Rules Are: ', css_rules); | |
| }); | |
| });</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #test{ | |
| background: #222; | |
| color: #fff; | |
| padding: 25px; | |
| font-family: 'Open Sans', Arial; | |
| line-height: 1.6; | |
| text-align: center; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var css2json = function(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; | |
| }; | |
| var css = function(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; | |
| }; | |
| $('#test').on('click', function(){ | |
| var css_rules = css($(this)); | |
| console.log('My CSS Rules Are: ', css_rules); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment