Come modificare dinamicamente la dimensione dello stile di una tela da JavaScript?

Question

Le dimensioni (larghezza e altezza) di una tela possono essere modificate, ma la dimensione dello stile della tela non può essere modificata dinamicamente.

canvas = document.getElementById('test_fabric'); 
ctx = this.canvas.getContext('2d'); 
canvas.style.width = 1000; // does not work. 
canvas.style.height = 260; // does not work. 
canvas.width = 100; // works. 
canvas.height = 100; // works. 

Sia canvas.width e canvas.height lavorare bene, ma entrambi canvas.style.width e canvas.style.height non funzionano.

Nel mio caso, le dimensioni dello stile della tela possono essere modificate solo da un file css o dallo stile in linea della tela.

canvas#test_fabric { 
    width:400px; 
    height:400px; 
    background:gold; 
} 

o

<div><canvas id="test_fabric" width="200" height="200" 
style="width:200px; height:200px"></canvas></div> 

Nota: il file CSS diventa inefficace quando esiste lo stile in linea.

Qual è il modo di modificare dinamicamente le dimensioni dello stile di una tela con JavaScript?

Grazie in anticipo!

Answer 1

La larghezza e l'altezza delle proprietà di stile richiedono la misurazione dei relativi valori, mentre la larghezza e l'altezza degli attributi HTML non richiedono. Quindi, è necessario impostare px, em or % ecc in modo esplicito nel codice:

canvas = document.getElementById('test_fabric'); 
ctx = canvas.getContext('2d'); 
canvas.style.width = '1000px'; // explicitly setting its unit 'px' 
canvas.style.height = '260px'; 

style.width/altezza senza unità è regola valida per i CSS.

Answer 2

ho usato jQuery che utilizzano il metodo CSS per altezza e larghezza impostazione

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#test_fabric").css({"border-color": "#C1E0FF", 
       "border-width":"1px", 
       "border-style":"solid","height":"500px","width":"500px"}); 
     }); 
    </script> 
    <div class="col-md-12"> 
     <div><canvas id="test_fabric" width="200" height="200"></canvas></div> 
    </div>