pococms/pcolordom.html

## pcolordom.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Trying to obtain <p> color using DOM</title>
  <style>
    p{color:red}
  </style>
</head>
<body>
<article id="article-test">
  <h1>Attempting to read color of paragraph. See window.ready() function</h1>
  <p>hello, world.</p>
</article>

<script> {
  function ready(fn) {
    if (document.readyState != 'loading') {
      fn();
    } else if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', fn, {
        once: true
      });
    } else {
      document.attachEvent('onreadystatechange', function() {
        if (document.readyState != 'loading')
          fn();
      });
    }
  }
  window.ready(function() {
      // Return HTMLCollection of all paragraphs in article.
      var pc = document.getElementById("article-test").querySelectorAll("p");
      // Pick out the first paragraph.
      p = pc.item(0)
      // Obtain text:
      console.log("paragraph text: " + p.innerText)    // Succeeds
      // Try to obtain color, which is styled red:
      console.log("paragraph color: " + p.style.color) // Displays nothing
  });
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Trying to obtain <p> color using DOM</title>
	<style>
	p{color:red}
	</style>
	</head>
	<body>
	<article id="article-test">
	<h1>Attempting to read color of paragraph. See window.ready() function</h1>
	<p>hello, world.</p>
	</article>

	<script> {
	function ready(fn) {
	if (document.readyState != 'loading') {
	fn();
	} else if (document.addEventListener) {
	document.addEventListener('DOMContentLoaded', fn, {
	once: true
	});
	} else {
	document.attachEvent('onreadystatechange', function() {
	if (document.readyState != 'loading')
	fn();
	});
	}
	}
	window.ready(function() {
	// Return HTMLCollection of all paragraphs in article.
	var pc = document.getElementById("article-test").querySelectorAll("p");
	// Pick out the first paragraph.
	p = pc.item(0)
	// Obtain text:
	console.log("paragraph text: " + p.innerText) // Succeeds
	// Try to obtain color, which is styled red:
	console.log("paragraph color: " + p.style.color) // Displays nothing
	});
	}

	</script>
	</body>
	</html>