title: How to change HTML style by taking the class name using javascript (no jQuery allowed)?
body: <p>I tried this so far and if I take the element id is working but if I take the class name is not working... </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;p id="p1" class="theClass"&gt;Hello World!&lt;/p&gt;
  &lt;p id="p2"&gt;Hello World!&lt;/p&gt;
  
  &lt;script&gt;
  
  document.getElementById("p2").style.color = "blue";
  document.getElementsByClassName("theClass").style.color = "blue";
  
  document.getElementById("p2").style.fontSize = "larger";
  &lt;/script&gt;
  
  &lt;p&gt;The paragraph above was changed by a script.&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>This is the output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/P1uTE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P1uTE.png" alt="enter image description here"></a></p>