変更のためのJavaScriptコードCSSの幅が機能しない

Question

JavaScriptコードを使用してクラスの幅を変更するための簡単なコードは機能しません。私は幅を与えている200pxです。次に、幅を50pxに変更します。私は幅を変更するためにJavaScriptコードを使用したい。しかし、それは動作していません。

document.getElementsByClassName("main").style.width = "50px";

.main { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
}

<div class="main"></div>

フィドル：https://jsfiddle.net/33zc0efq/

Answer 1

document.getElementsByClassNameあなたはそのためのインデックスを指定する必要がありますので、オブジェクトの配列を返します。 document.getElementsByClassName("main")[0].style.width="50px";

document.getElementsByClassName("main")[0].style.width="50px";

.main{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color:red; 
 
}

<div class="main"> 
 
</div>

に変更します