JS怎么手动实现文字变大变小?
时间: 2024-03-10 22:48:03 浏览: 15
可以使用JavaScript来手动实现文字的变大和变小。下面是一种实现方式:
```html
<button onclick="increaseFontSize()">变大</button>
<button onclick="decreaseFontSize()">变小</button>
<p id="text">这是一段文本</p>
```
```javascript
function increaseFontSize() {
var textElement = document.getElementById("text");
var currentSize = parseInt(window.getComputedStyle(textElement).fontSize);
textElement.style.fontSize = (currentSize + 2) + "px";
}
function decreaseFontSize() {
var textElement = document.getElementById("text");
var currentSize = parseInt(window.getComputedStyle(textElement).fontSize);
textElement.style.fontSize = (currentSize - 2) + "px";
}
```
以上代码中,我们分别为“变大”和“变小”按钮添加了`onclick`事件处理函数`increaseFontSize()`和`decreaseFontSize()`。这两个函数分别用来增加和减小文本的字体大小。我们首先获取了要操作的文本元素,并获取了其当前的字体大小。然后,我们将字体大小增加或减小2px,并通过`style.fontSize`属性将修改后的字体大小应用到文本元素上。
需要注意的是,以上代码只是一种简单的实现方式,实际上文字的字体大小还可以通过其他方式进行控制,比如使用CSS的`transform: scale()`属性等。