getComputedStyle
In this chapter you will learn:
Computed Styles
<!DOCTYPE HTML><!-- j a va 2 s .c o m-->
<html>
<head>
<style title="core styles">
p {
padding: 7px !important;
}
</style>
</head>
<body>
<p id="block1">This is a test.</p>
<div id="placeholder"></div>
<script>
var placeholder = document.getElementById("placeholder");
displayStyles();
function displayStyles() {
var newElem = document.createElement("table");
newElem.setAttribute("border", "1");
var targetElem = document.getElementById("block1");
var style = document.defaultView.getComputedStyle(targetElem);
newElem.innerHTML +="Property Count" + style.length;
newElem.innerHTML +=" margin-top" + style.getPropertyValue("margin-top");
newElem.innerHTML +=" font-size" + style.getPropertyValue("font-size");
newElem.innerHTML +=" font-family" + style.getPropertyValue("font-family");
placeholder.appendChild(newElem);
}
</script>
</body>
</html>
Next chapter...
What you will learn in the next chapter: