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:-
Publish A Comment