title: dynamically update css content using javascript
body: <p>There is a need to update css to dynamic value and I am not sure what's the best approach to it.</p>
  
  <pre><code>&lt;div id="app" style="zoom: 0.XX;"&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>The zoom level will trigger based on window resize and the app will zoom according.  I loaded this app into cordova and have it run within iPAD, then I realize the font-size needs to be adjusted to the same as zoom level using "-webkit-text-size-adjust" in order for it to not break the design layout.</p>
  
  <p>My challenge is to set the css dynamically like this:</p>
  
  <pre><code>#app * {
    -webkit-text-size-adjust : nn%  
  }
  </code></pre>
  
  <p>Where nn is the zoom X 100 + '%'</p>
  
  <p>I have tried:</p>
  
  <p>1)  Set the style on the app div, but this doesn't help to apply to inner elements</p>
  
  <pre><code> &lt;div id="app" style="zoom: 0.XX; -webkit-text-size-adjust: XX%"&gt;
  </code></pre>
  
  <p>2)  Use javascript to set to all inner nodes, but not only I think this is less efficient, but it won't get trigger if my window doesn't resize, that means if I navigate to other pages, this logic won't get called.</p>
  
  <p><a href="http://REF:%20https://stackoverflow.com/questions/25305719/change-css-for-all-elements-from-js" rel="nofollow noreferrer">REF: https://stackoverflow.com/questions/25305719/change-css-for-all-elements-from-js</a></p>
  
  <pre><code>let textSizeAdjust = function(zoom) {
    let i,
    tags = document.getElementById("app").getElementsByTagName("*"),
    total = tags.length;
  
    for ( i = 0; i &lt; total; i++ ) {
      tags[i].style.webkitTextSizeAdjust = (zoom * 100) + '%';
     }
  }
  </code></pre>
  
  <p>3) I tried using javascript, and most likely they are technically incorrect because querySelector return null.</p>
  
  <pre><code>document.querySelector('#app *').style.webkitTextSizeAdjust = zoom *100 + '%';
  
  document.querySelector('#app').querySelector('*').style.webkitTextSizeAdjust = zoom * 100 + "%";
  </code></pre>
  
  <p>Ultimate, I believe I need to dynamically create the css, for the browser to apply this setting to the DOM:</p>
  
  <pre><code>#app * {
     -webkit-text-size-adjust: nn    
  }
  </code></pre>
  
  <p>Please let me know if this is the right, or how to use javascript to create the above css and change the value dynamically?</p>