js通过添加按钮,实现更改文字大小和颜色
时间: 2024-03-17 20:44:58 浏览: 26
可以通过JavaScript来实现通过按钮更改文字大小和颜色的效果。可以使用以下代码实现:
HTML代码:
```
<p id="text">这是一段文字</p>
<button onclick="changeSize()">更改文字大小</button>
<button onclick="changeColor()">更改文字颜色</button>
```
JavaScript代码:
```
function changeSize() {
var text = document.getElementById("text");
var currentSize = window.getComputedStyle(text).fontSize;
var newSize = parseInt(currentSize) + 5;
text.style.fontSize = newSize + "px";
}
function changeColor() {
var text = document.getElementById("text");
var colors = ["red", "blue", "green", "purple", "orange"];
var currentColor = window.getComputedStyle(text).color;
var index = colors.indexOf(currentColor);
var newIndex = (index + 1) % colors.length;
text.style.color = colors[newIndex];
}
```
这里定义了两个函数,分别是`changeSize()`和`changeColor()`。当用户点击按钮时,会调用对应的函数来更改文字大小和颜色。`changeSize()`函数会获取当前文字的大小,然后将它增加5像素。`changeColor()`函数则会将文字颜色循环设置为预定义的几种颜色。