title: Change CSS properties on click
body: <p>I am trying to change the CSS of one element on click of another element. I've searched a lot but nothing works perfectly. Currently I am using the below code, but it doesn't work. Can anyone tell me what I missed?</p>
  
  <pre><code>&lt;div id="foo"&gt;hello world!&lt;/div&gt;
  &lt;img src="zoom.png" onclick="myFunction()" /&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function myFunction() {
      document.getElementById('foo').style.cssText = 'background-color: red; color: white; font-size: 44px';
  }
  </code></pre>