javascript 如何使用 HTML CSS JS 创建滑块/切换以更改屏幕上的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18315749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To create slider/toggle to change font size on screen with HTML CSS JS
提问by Skinny Totoro
is there any way I can make this -->
有什么办法可以做到这一点-->
so I'd like to make a slider/toggle and user can drag/slide it to change into different size (or point)
所以我想制作一个滑块/切换器，用户可以拖动/滑动它以更改为不同的大小（或点）
and for each point, the displayed text is changed just like the picture I describe
对于每个点，显示的文本就像我描述的图片一样改变
do I use HTML5 canvas? Or is there any way (maybe with js, to achieve that interactive toggle/slider manually adjust font size) for display preview?
使用 HTML5 画布？或者有什么方法（也许用js，实现交互式切换/滑块手动调整字体大小）进行显示预览？
thank you in advance!
先感谢您！
采纳答案by Claudio Holanda
You can achieve this using just plain HTML5and JavaScript.
您可以仅使用普通的 HTML5和 JavaScript来实现这一点。
HTML5 has an input type called range, and it behaves exactly as you want for this example.
HTML5 有一个名为range的输入类型，它的行为完全符合您在本示例中的要求。
Note that according to CanIUse, the actual major browser support for input[type="range"]is: IE10+, FF23+and Chrome 5+.
请注意，根据 CanIUse，实际支持的主要浏览器input[type="range"]是：IE10+、FF23+和Chrome 5+。
To achieve what you want you should first create the element:
要实现您想要的，您应该首先创建元素：
<input type="range" min="12" max="42" id="slider" />
and then listen to its changes with js (I'm using jQuery for the example bellow):
然后用 js 听它的变化（我在下面的例子中使用了 jQuery）：
$('#slider').on('change',function(){
var val = $(this).val();
//do the rest of the action...
});
Here is a working example of what you want: http://jsfiddle.net/vNfh2/1/
这是您想要的工作示例：http: //jsfiddle.net/vNfh2/1/
回答by StoicJester
You can use jQueryUI's slider to do this quite easily.
您可以使用 jQueryUI 的滑块轻松完成此操作。
Here is a link to the web page jQueryUI Slider.
这是jQueryUI Slider网页的链接。
Put something in your HTML for the slider,
在你的 HTML 中为滑块放一些东西，
<div id="slider"></div>
Then put something like this in your JavaScript:
然后在你的 JavaScript 中放入这样的内容：
$( ".slider" ).slider({
change: function( event, ui ) {
$(<text div selector>).css("font-size",(ui.value+"px"));
}
});
