In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be changed to white. To tackle this issue, I initially attempted to alter the background and text colors using the following code:
frame = document.getElementsByTagName(“iframe”);
var D = frame.contentDocument;
var cwin = frame.contentWindow;
D.body.style.backgroundColor ='black';
D.body.style.color = 'white';
However, I soon realized that elements styled with black would become invisible due to their styling. To address this, I tried traversing through the DOM to identify and change any black-colored elements to white. Unfortunately, the code snippet below did not produce the desired outcome:
var all = D.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
computedStyle = cwin.getComputedStyle(all[i]);
var c = computedStyle.getPropertyValue("color");
if(c =='rgb(0,0,0)'){
all[i].style.setProperty("color", "white", null);
}
}
Note: Stylesheets are loaded externally, making it impractical to manually modify them. Thus, I am seeking alternative solutions or improvements to the existing code for runtime execution.