是否可以输入带有变量的背景图像大小？

Question

var setSize = $('#inputSize').val();

$("#canvas").css({
  'background-size': '100px' + setSize
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputSize" class="form-control" type="number" value="">

Answer 1

可以，但是您的代码中有问题。

最好这样做

var setSize = parseFloat($('#inputSize').val());
var size = isNaN(setSize) ? 0 : setSize;
$("#canvas").css({
  'background-size': 100 + size + 'px'
});

Answer 2

考虑到您想在文本框中输入值时添加 CSS。

HTML

<input id="inputSize">
<div id="canvas"></div>

JS

$('#inputSize').on('input', function() {
  var setSize = 100 + parseInt($('#inputSize').val()) + 'px';

  $("#canvas").css({
    'background-size' : setSize
  });
});

是否可以输入带有变量的背景图像大小？

Is it possible to enter a background image size with variable?

javascript

css

jquery

background-image

background-size