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() {&nbsp; var fontsizeval = $(this).val();&nbsp; var fontsizemin = $(this).attr('min');&nbsp; var fontsizemax = $(this).attr('max');&nbsp; $('.text').css("font-size", fontsizeval + "px");});* {&nbsp; font-size: 12px;}.text {&nbsp; font-size: 120px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; Font Size: <input class="font_size" type="range" value="120" min="30" max="200"><div class="text">Text&nbsp; <div>