jQuery：使用范围滑块控制 CSS

Question

如何通过jQuery使用范围滑块控制CSS？一些示例代码：$('.font_size').on('input', function() {  var fontsizeval = $(this).attr('value');  var fontsizemin = $(this).attr('min');  var fontsizemax = $(this).attr('max');  $('.text').css("font-size", fontsizeval + "px");});* {  font-size: 12px;}.text {  font-size: 120px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="text">Text  <div>    Font Size: <input class="font_size" type="range" value="120" min="30" max="200">

Answer 1

使用而不是val()attr("value")

$('.font_size').on('input', function() {

  var fontsizeval = $(this).val();

  var fontsizemin = $(this).attr('min');

  var fontsizemax = $(this).attr('max');

  $('.text').css("font-size", fontsizeval + "px");

});

* {

  font-size: 12px;

}

.text {

  font-size: 120px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  Font Size: <input class="font_size" type="range" value="120" min="30" max="200">

<div class="text">Text

  <div>