I've been playing around with Javascript to modify the background and theme of my page, http://www.gfcf14greendream.com/, so that it displays a different background in each season, and that works. Now since everything was green before (I am such a freak), I've been experimenting to change the font color of div tags to a readable color depending on the background (for now I'm using a purple on the summer background, rgb(128, 0, 128) but if anyone thinks there is a better color let me know), and it has worked, using these lines:
var divs = window.parent.document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].style.color = "rgb(128, 0, 128)";
}
It does work, for these pages that I changed (I haven't changed all since I'm still testing) http://www.gfcf14greendream.com/smssender.html , http://www.gfcf14greendream.com/employmentassistant.html . But while it seems like it works for this page, http://www.gfcf14greendream.com/programs.html , the divs that are inside the table are unaffected (like this div:)
<td align="center">
<div style="text-align: center; color:#00FF00; font-size: 15px">
<font color="#00FF00">December 16th, 2012</font>
</div>
</td>
So why is it the divs within a <table> tag are not recognized? Should I deem tables as obsolete (someone told me they're evil) and try to format one with divs using CSS?
at the moment this isn't working because of the <font> tag. The divs style is being affected, however the font tag within is not allowing you to see the changes. Remove the font tag and you should see something.
With that said, you shouldn't be using the <font> tag at all. W3 tells us HTML5 classifies it as a non-conforming feature, and "... really, don't use it."