title: javascript pass variable to style
body: <pre><code>screen_w = window.innerWidth;
  screen_h = window.innerHeight;
  </code></pre>
  
  <p>to get the window deminsions and then set it to a variable. Is there a way to take that variable and then use it in my style? </p>
  
  <p>Such as:</p>
  
  <pre><code>img
  {
    width:screen_w;
    height:screen_h;
  }
  </code></pre>
  
  <p>I have tried </p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  &lt;style&gt;
  img..
  &lt;/style&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>but that doesn't seem to work.. is this even possible or is there some other way to pass a variable?</p>
  
  <p>Thanks in advance.</p>
  
  <p>///Added</p>
  
  <p>Ok so the Link down there ---v</p>
  
  <p>Is discussing making a node that is your "style"</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var head = document.getElementsByTagName('head')[0],
      style = document.createElement('style'),
      rules = document.createNode('img { width:screen_w; height:screen_h; }');
  
  style.type = 'text/css';
  if(style.styleSheet)
      style.styleSheet.cssText = rules.nodeValue;
  else style.appendChild(rules);
  head.appendChild(style);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>so then for my html I just have to insert my picture.</p>
  
  <pre><code>&lt;img src="slide1.jpg"&gt;
  </code></pre>
  
  <p>but its still not quite passing somehow.</p>
  
  <p>I can however get the "document.getElementById to work. Is there a way to do this without a button.. like onLoad()?</p>
  
  <pre><code>function changeSize()
  {
  document.getElementById("picture").height= screen_h;
  document.getElementById("picture").width= screen_w;
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;img id="picture" src="slide1.jpg" width="300" height="98" /&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;input type="button" onclick="changeSize()" value="Change size of image" /&gt;
  </code></pre>