Question

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

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

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

Answer 1

这很简单。您可以在输入中使用oninput="myFunction()"属性。或在您的JavaScript中放入addEventListener("input",myFunction)。这应该使它生效。

如果这不是您要查找的内容，则可以在其上使用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); 
  });

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

2 个答案: