Unable to get external css properties while trying to modify DOM . How can I solve the iss? [duplicate]

body{
    margin:0;
    justify-content: center;
    background: url(/image/bg-cover.png);
}
.des{
    padding-bottom:  100px; ;
}

.container{
    display: flex;
    overflow-x: auto;
    
}
.container ::-webkit-scrollbar{
    width:0px;
}

.wheelbg{
    height: 400px;
    width :600px;
    
    /* background-image: url(/image/wheel-bg.jpg); */
    margin-right: 33px;
    
    
    /* background: turquoise; */
    
}
.wheelbg img{
    height: 250px;
    width: auto;
    object-fit: cover;
    display: block;
    margin:auto;
    
}

button{
    padding: 10px;
    border: none;
    background: #37f;
    font-size: 30px;
    color: white;
    position: absolute;
    top:50%;
}
.nex{
    border-radius: 10px 0px 0px 10px;
    margin-left: 50em;


}
.prev{
    border-radius: 0px 10px 10px 0px;
}

button:hover{
    transform: scale(1.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Varta:wght@300;400;500&display=swap">
</head>
<body>
    <h1>Wheels</h1>
    <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, dignissimos. Modi animi quam architecto, deleniti ipsum porro voluptatum dolorum fuga, ad et tempora laborum fugiat magnam, quidem aut reiciendis libero!</p>
    
   <button class="prev"><</button>
    
    <div class="container">
        <div class="wheelbg">
            <img src="image/1.png" alt="">
            wheel 1
        </div>
        <div class="wheelbg">
            <img src="image/2.png" alt="">
            wheel 2
        </div>
        <div class="wheelbg">
            <img src="image/3.png" alt="">
            Wheel 3
        </div>
        <div onclick="zoom()" class="wheelbg">
            <img src="image/4.png" alt="">
            <div>Wheel 4
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 

            </p></div> 
        </div>
    </div>
    <button class="nex">></button>
    <script  src="script.js"></script>
</body>
</html>

enter image description here

I am trying to make a webpage by following these rules:

  1. Convert the attached “layout.jpg” to HTML without using any html framework like (bootstrap, w3css etc.). The assets are shared in an image zip and use dummy content.
  2. Keep container maximum size of “1152px X 720px”. Layout should be vertical center position.
  3. Slider functionality should be enabled without using any plugin (as per design).
  4. Zoom functionality – by default all wheel images should be in normal state. On click, an active wheel should be zoomed smoothly as per design.
  5. While clicking left/right arrow, an active state will be inactive (zoom to normal state) and then move accordingly.
  6. If slide reached the beginning/end, the left/right side arrow should be disabled (unable to click)

While trying to do this, while fetching the css properties by document.getElementsByClassName(“wheelbg”).style.height;
it is showing height is not defined.
|i am using css external file.