How to get all CSS styles associated with an element using jQuery ?
Last Updated :
12 Dec, 2021
In this article, we will know how to get the applied CSS properties associated with the elements using jQuery, & will also understand its implementation through the example. Given an HTML document containing some CSS properties and we need to retrieve all the CSS styles of a particular element by using jQuery. The two approaches are as follows.
Approach 1: In this approach, we will use the document.defaultView.getComputedStyle() method to get all the cascading styles associated with that particular element. After that, append the style to a string one by one by traversing the object.
Please refer to the HTML DOM defaultView Property & getComputedStyle() method for further details.
Example: This example implements the document.defaultView.getComputedStyle() method to retrieve the various applied styling properties associated with the particular element.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Getting all the CSS styles
of an element using jQuery
</title>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="GFG_Fun();"> Click Here </button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button "
+ "to get the all CSS styles "
+ "associated with the element.";
function GFG_Fun() {
var ar = document.defaultView.getComputedStyle(up, null);
var str = "";
for(var key in ar) {
str = str + key + ': ' + ar[key] + "-";
}
down.innerHTML = str;
}
</script>
</body>
</html>
|
Output:
Approach 2: In this approach, only specific styles are getting extracted. We can pass the name of the styles. The method cssSpecific is defined that performing the string operations on the passed string and getting the properties from the object, and returning them as a string.
Example: This example is implemented to retrieve only the specific styling properties associated with an element.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Getting all the CSS styles
of an element using jQuery
</title>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<p id="GFG_UP"></p>
<button onclick="GFG_Fun();"> Click Here </button>
<p id="GFG_DOWN"></p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button to get"
+ " only specific CSS styles associated "
+ "with the element.";
(function($) {
$.fn.cssSpecific = function(str) {
var ob = {};
if(this.length) {
var css = str.split(', ');
var prms = [];
for(var i = 0, ii = css.length; i < ii; i++) {
prms = css[i].split(':');
ob[$.trim(prms[0])] = $(this).css($.trim(prms[1] || prms[0]));
}
}
return ob;
};
})(jQuery);
function GFG_Fun() {
var styles = $('#GFG_UP').cssSpecific(
'color, backgroundColor, opacity, height, lineHeight:height');
down.innerHTML = JSON.stringify(styles);
}
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...