Javascriptは、私が望むオブジェクトのCSSを変更しない

Question

私は、要素のループのCSSを変更する必要があるコードを持っていますが、（ループされている）ボタンをクリックするたびに、 id = "big"のidです。その下にある要素を変更したい。私のコードは次のとおりです。

HTML：

<button onclick="getbig()"> 
<img style="height:50;width:800;" src="imgsrc"> 
</button> 
<div id="big" style="background-color:white;"></div> 

"ビッグ" は、私が変更したいIDです：

のJs：

var big = 1; 
function getbig(){ 
    if(big == 1){ 
     big = 2; 
     document.getElementById('big').style.cssText = "height:300;width:800;"; 
    } 
    else{ 
     big = 1; 
     document.getElementById('big').style.cssText = "max-height:0;max-width:0;"; 
    } 
} 

Answer 1

あなたが好きな値に単位pxを追加する必要がありますこの：

var big = 1; 
 

 
function getbig() { 
 
    if (big == 1) { 
 
    big = 2; 
 
    document.getElementById('big').style.cssText = "height:300px;width:800px;"; 
 
    } else { 
 
    big = 1; 
 
    document.getElementById('big').style.cssText = "max-height:0;max-width:0;"; 
 
    } 
 
}

#big { 
 
    background: red; 
 
}

<button onclick="getbig()"> 
 
<img style="height:50px;width:80px;" src="https://lorempixel.com/800/800/"> 
 
</button> 
 
<div id="big"> 
 
</div>