如何使用 JS 更改 CSS 高度？

Question

I'm trying to adjust the height of the .topnav and its container. How can I do this with javascript onclick when the .icon is clicked? myFunction() should bee triggered.

<div class="topnav" on="myBoi()">
  <img style="width: 380px; height: 300px; position: relative; left: 35%;
            bottom: 40px;" src="mobilfotoğraflar/teknik-soğutma-logo.png" alt="">
  <div id="myLinks">
    <a class="yazı" href="#anasatyfa"></a>
    <a class="yazı" href="#news">News</a>
    <a class="yazı" href="#contact">Contact</a>
    <a class="yazı" href="#about">About</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Answer 1

Try below code

 function myFunction() { document.getElementById('id1').style.height= '400px'; }

 .topnav{background:#eee;}

 <div class="topnav" on="myBoi()" id="id1"> <img style="width: 380px; height: 300px; position: relative; left: 35%; bottom: 40px;" src="mobilfotoğraflar/teknik-soğutma-logo.png" alt=""> <div id="myLinks"> <a class="yazı" href="#anasatyfa"></a> <a class="yazı" href="#news">News</a> <a class="yazı" href="#contact">Contact</a> <a class="yazı" href="#about">About</a> </div> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">