用javascript写程序:点击按钮更换文本颜色
时间: 2023-09-17 11:10:58 浏览: 838
好的,以下是使用 JavaScript 实现点击按钮更换文本颜色的代码:
HTML 代码:
```html
<button id="btn" onclick="changeColor()">更换颜色</button>
<p id="text">这是一段文本。</p>
```
JavaScript 代码:
```javascript
function changeColor() {
var text = document.getElementById("text");
var randomColor = Math.floor(Math.random()*16777215).toString(16);
text.style.color = "#" + randomColor;
}
```
以上代码会在点击按钮时,随机生成一个颜色,并将文本颜色设置为该随机颜色。
相关问题
用javascript作答:点击按钮更换文本颜色,
好的,以下是用JavaScript实现点击按钮更换文本颜色的代码:
HTML部分:
```html
<button id="change-color-btn">更换颜色</button>
<p id="text">这是要改变颜色的文本。</p>
```
JavaScript部分:
```javascript
// 获取文本元素和按钮元素
var text = document.getElementById("text");
var changeColorBtn = document.getElementById("change-color-btn");
// 定义文本颜色数组
var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
// 给按钮添加点击事件
changeColorBtn.addEventListener("click", function() {
// 随机获取一个颜色
var randomIndex = Math.floor(Math.random() * colors.length);
var randomColor = colors[randomIndex];
// 设置文本颜色
text.style.color = randomColor;
});
```
以上代码会在页面中添加一个按钮和一个段落,点击按钮会随机更换段落的文本颜色。你可以根据自己的需要修改颜色数组和文本元素的id。
用javascript写程序:有三个按钮为红色按钮,绿色按钮,蓝色按钮,点击按钮更换文本颜色
可以使用以下javascript代码实现:
```javascript
// 获取三个按钮元素
var redBtn = document.getElementById("redButton");
var greenBtn = document.getElementById("greenButton");
var blueBtn = document.getElementById("blueButton");
// 获取要更换颜色的文本元素
var text = document.getElementById("changeColorText");
// 给三个按钮添加点击事件监听器
redBtn.addEventListener("click", function() {
text.style.color = "red";
});
greenBtn.addEventListener("click", function() {
text.style.color = "green";
});
blueBtn.addEventListener("click", function() {
text.style.color = "blue";
});
```
其中,"redButton"、"greenButton"、"blueButton"、"changeColorText" 分别是三个按钮和要更换颜色的文本的 id 属性值,需要根据实际情况修改。
阅读全文