Change the CSS of a DIV in an iFrame from Parent
<p>I just started to go further in my web development skills in my job and stucked with a little problem. </p>

<p>I have an iFrame (iframe.html), and in this iframe is a div styled as a green square.
I want to change the color of the Div outside the iframe with a button in my Parent (index.html) with an onClick Function.</p>

<p>I tried a few things, like calling a normal Function (document.getElementById and so on). But nothing really worked.
So I thought, that jquery might have some solutions and I'm stucked now in this code, but it doesn't work.</p>

<p>Can anyone help?</p>

<p>PS: this is not a cross-origin case. i got both html files in the same Directory.</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;
    &lt;head&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
        &lt;script src="jquery-1.12.2.min.js"&gt;&lt;/script&gt;

        &lt;title&gt;buttonframetest&lt;/title&gt;
        &lt;script type="text/javascript"&gt;
            function Clickit() {
                 $(document).ready(function(){
            $('iframe').contents().find('background-color').css('backgroundColor', 'white');
            });
            }

        &lt;/script&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;iframe id="iframe" src="iframe.html" width="500px;" height="500px"&gt;
        &lt;p&gt;iFrame nicht darstellbar in deinem Browser&lt;/p&gt;
        &lt;/iframe&gt;
        &lt;br&gt;
        &lt;button type='button' onClick="Clickit();"&gt;Klick&lt;/button&gt;
        &lt;button type="button" onclick="redy"&gt;CHANGE&lt;/button&gt;
        &lt;br&gt;
        &lt;div class="ChangeColor"&gt;&lt;/div&gt;


        &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>