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

Date Published: 16/04/2020 Published By: JaiSchool

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

Publish A Comment

Leave a Reply

Your email address will not be published.