单击按钮时，高度和宽度不会改变

Question

我想要一个按钮，当我点击按钮时，画布的尺寸会改变1px ，但为什么我的代码不会改变< / strong>大小。

$("#myButton").click(function() {
  console.log("Hello");
  var fontSize = parseInt($('myCanvas').css("height"));
  var fontSize1 = parseInt($('myCanvas').css("width"));
  console.log(fontSize+ " "+ fontSize1);
  fontSize = fontSize + 1 + "px";
  fontSize1 = fontSize1 + 1 + "px";
  $('myCanvas').css({'height':fontSize});
  $('myCanvas').css({'width':fontSize1});
});

#myCanvas{
  border: 1px solid #000;
  width: 578px; 
  height: 200px;
  margin-top:10px;
  margin-left: 15px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<canvas id="myCanvas"></canvas>
<button id="myButton" >Resize</button>

我希望当我点击按钮时，画布的大小会从高度和宽度更改。

Answer 1

$(document).ready(function(){ // when document ready, define it!
 $("#myButton").click(function() {
  console.log("Hello");
  var fontSize = parseInt($('#myCanvas').css("height")); // use #
  var fontSize1 = parseInt($('#myCanvas').css("width")); // use #
  console.log(fontSize+ " "+ fontSize1);
    fontSize = fontSize + 1 + "px";
    fontSize1 = fontSize1 + 1 + "px";
    $('#myCanvas').css({'height':fontSize}); // use #
    $('#myCanvas').css({'width':fontSize1}); // use #
  });
})