title: How to change css class property dynamically from javascript using html input
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  function calculate() {
      var myBox1 = document.getElementById('box1').value;
      var myBox2 = document.getElementById('box2').value;
      if (showAlert(myBox1, 'Width') &amp;&amp; showAlert(myBox2, 'Height')) {
          var result = document.getElementById('result');
          var myResult = [(myBox1 * myBox2 * 0.69)/100];
          result.value = parseFloat(myResult).toFixed(2);
      }
  }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cropper-face,
  .cropper-line,
  .cropper-point {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=10);
    opacity: .1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="box1" type="text" onchange="calculate()"/&gt;
  &lt;input id="box2" type="text" onchange="calculate()"/&gt;
  &lt;input id="result" type="text" readonly="readonly" onchange="calculate()"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to change width and height property dynamically using html input field. </p>
  
  <p>Can anyone tell me how can this possible by using this input as css property width and height in this code</p>
  
  <p>I have two text-box for width &amp; height. and it should be change width and height of this css when I enter values in this field. </p>
  
  <p>As there are 3 classes which has same property. How can I change its width and height according to user input . </p>
  
  <p>Thanks in advance. </p>