title: Change the CSS of a DIV in an iFrame from Parent
body: <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>