Print the List of All CSS properties And Their Default Value in JS

There is a predefined function in Java-Script to print the complete list of CSS properties which is getComputedStyle(). It returns CSS properties of an HTML element with their default value.

getComputedStyle() return properties in an object. The first argument of it will contain the selected element.

So to access data from object by index, we use item() method.

To get the default values of properties, access getpropertyValue() method from the object returned by getComputedStyle() and give individual property names in its argument.

<!DOCTYPE html>
<html>
<body>

<p id="print"></p>
<button onclick="get_allpro()"><h1>print property and value</h1></button>

<script>
	function get_allpro()
	{
		var webpage=document.body;
		var result="";
		var properties_obj=window.getComputedStyle(webpage,null);
		var i;
		for(i=0;properties_obj.length>i;i++){
			var plist=properties_obj.item(i);
			
			var p_default_value = properties_obj.getPropertyValue(plist);
			
			result += i+". "+plist+" : "+p_default_value+"<br>";
		}
		document.getElementById("print").innerHTML=result;
}
</script>

</body>
</html>

Output:-




Also, read related articles
|| Change Class of An Html Tag in Java-script
|| Print the width of the window when it is resizing
|| disable submit button’s (of form) default behavior
|| removeAttr() method in Jquery

Leave a Comment