javascript - 如何使用 HTML 5 输入类型范围？

Question

如何使用 html 中的范围输入类型更改字体的大小？

<input type="range" name="points" min="1" max="10">

我想要这样，当我拖动滑块时，字体大小应该根据滑块范围的值而变化。

Answer 1

这很容易。您可以oninput="myFunction()"在输入上使用属性。或addEventListener("input",myFunction)在您的 javascript 中添加一个。这应该使它能够活下去。

如果这不是您要查找的内容，则可以在其上使用 for 循环并使用getElementsByTagName("*")

这是另一个示例，您也可以使用 onchange，但我选择使用 oninput。

function myFunction(){
	var para = document.getElementsByTagName("p");
    var input = document.getElementById("ranger");
    for (var i = 0; i < para.length; i++){
    	para[i].style.fontSize = input.value + "px";
    }
}

p {
  font-size: 50px;
}

<div>You can also use the onchange attribute to set it when it just changes. Using oninput executes when user gives input</div>
<input type="range" id="ranger" value="50" oninput="myFunction()">
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>

这是一个小提琴，它显示了使用 onchange 属性
JSFiddle的示例

Answer 2

在滑块的更改事件中，按值相应地更改大小：

<input type="range" name="points" min="1" max="10" id="MySlider">

$("#MySlider").change(function() {
    $("#MyText").css("font-size", $("#MySlider").value); 
  });