Change CSS within iframe on same domain

HTML & CSS
1

Hi,

I am using JSColor script on the admin panel of my web application and I also have an iframe on the same page to preview the changes made to colors. I want the iframe’s style update when I change colors using the color picker of JSColor. As [URL=“http://jscolor.com/try.php#onchange”]this example shows, the following code changes the body background color of the current page.

onchange="document.getElementsByTagName('body')[0].style.background = '#'+this.color"

How can I modify it so that it will change the background color of the iframe (iframe id is “preview”)?

2

You should be able to use the following

onchange="document.getElementByName('iframe_name_here').style.background = '#'+this.color"
3

Thanks Chris, I found how to do it but I forgot to update this post. Here is the code I used:

onchange="document.getElementById('iframe_id').contentWindow.document.getElementsByTagName('body')[0].style.background = '#'+this.color"

also, for divs:

onchange="document.getElementById('iframe_id').contentWindow.document.getElementById('header').style.background = '#'+this.color"

I spent a lot of time to finally come up with this and hopefully this will help others as well who want to do the same thing.