Question

我有HTML，我想更改字体大小的文字＆＃34; ....＆＃34;输入类型=使用Jquery时的范围

HTML

<div class="font-size"><p>Font size:</p><output for="fader" id="fontsize">50</output></div>
<input class="none" type="range" min="0" max="100" value="0" id="fader" step="1" onchange="outputbox01(value)">
<text id="v-28" class="changeMe" y="0.8em" fill="white" stroke="black" stroke-width="0" transform="translate(35,20.5) ">This is the text you want to change the font size</text>

的JavaScript

function outputbox01(vol) { document.querySelector('#fontsize').value = vol; }

$(document).ready(function() {
    $("#fontsize").change(function () {
    $('#v-28').css("font-size", $(this).val() + "px");
});

}）;

感谢你的观看。

Answer 1

首先，您在jQuery事件处理程序中使用错误的选择器来侦听更改事件。

在您的情况下（即范围）更改事件仅在鼠标释放后触发，因此您可以使用input事件来跟踪范围更改。

$("#fader").on("input change",function () {
        $('#v-28').css("font-size", $(this).val() + "px");
});

这是Working Fiddle

P.S

如果你想使用滑块插件，你绝对可以尝试Slider | jQuery UI。

希望这有助于你的事业。

Answer 2

我知道问题是询问jQuery，但是对于在搜索时发现这个问题的人来说，这里有一个不使用jQuery的答案。

<input type="range" min="12" max="72" value="16" id="font-size" />

然后是以下JavaScript：

var slider = document.getElementById('font-size');

slider.addEventListener('input', function() {
    var size = slider.value;
    // this sets the body's font size property, but you can set whatever you need to
    document.body.style.fontSize = size + "px";
});

在拖动滑块期间会引发input事件。只有在完成拖动时才会引发change事件。使用您喜欢的任何一种。

如何使用Jquery使用<input type =“range”/>更改font-size Text

2 个答案:

这是Working Fiddle