js滑动滑动条改变盒子文字大小
时间: 2023-08-14 19:40:32 浏览: 48
可以使用JavaScript监听滑动条的值改变事件,然后通过修改CSS样式来改变盒子文字大小。具体实现步骤如下:
1. 给滑动条和盒子分别设置id属性,方便后面使用。
```html
<input type="range" id="slider">
<div id="box">Hello, World!</div>
```
2. 编写JavaScript代码,获取滑动条和盒子元素,监听滑动条值改变事件,根据滑动条值修改盒子文字大小。
```javascript
var slider = document.getElementById("slider");
var box = document.getElementById("box");
slider.addEventListener("input", function() {
var value = slider.value;
box.style.fontSize = value + "px";
});
```
上述代码中,addEventListener方法用于监听滑动条值改变事件,input事件会在滑动条值发生改变时触发。获取滑动条的值可以使用value属性,根据该值设置盒子的字体大小即可。
3. 编写CSS样式,设置盒子的初始字体大小。
```css
#box {
font-size: 16px;
}
```
完整代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Slider Demo</title>
<style>
#box {
font-size: 16px;
}
</style>
</head>
<body>
<input type="range" id="slider">
<div id="box">Hello, World!</div>
<script>
var slider = document.getElementById("slider");
var box = document.getElementById("box");
slider.addEventListener("input", function() {
var value = slider.value;
box.style.fontSize = value + "px";
});
</script>
</body>
</html>
```