0

I have an iFrame that is turned editable when the page loads, like this:

function iframeLoad() {
    iframe.contentDocument.designMode = 'on';
}

The problem is, the background of the page is very dark, and the text inside of the iFrame is black, so the user has an extremely difficult time reading the text. Is there a way to change the text color inside the iFrame to white so the user can read it? I'm making a WYSIWYG editor, and it is all in pure JS with no separate frameworks.

HTML code:

<div class="frame-div">
     <iframe frameborder="0" id="text-area-iframe"></iframe>
</div>

Also, eventually, I would like the user to have control over the text using an <input type="color"> element. If there is a way to have the default color to be white and then have a function or method to change the color thereafter, that would be amazing.

Thanks!

lionrocker221
  • 171
  • 3
  • 8
  • Have you tried doing in CSS `.frame-div{color : white ;}` ? – Bob Oct 07 '20 at 16:16
  • Also, you can use ` – Bob Oct 07 '20 at 16:22
  • Apply CSS style to iframes -- many answers! https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe#:~:text=Style%20for%20the%20iFrame%20Section,your%20parent%20Style%20sheets%20also. – user8356 Oct 07 '20 at 16:31
  • @Bob I tried using color: white, but it doesn't work – lionrocker221 Oct 07 '20 at 16:42
  • @Bob would using ` – lionrocker221 Oct 07 '20 at 16:44

1 Answers1

0

I would suggest you try this:

document.getElementById('text-area-iframe').contentWindow.document.body.style.color='white

Lipan Ionut Alexandru
  • 36
  • 5