在页面中显示一段文字和两个按钮,编写js代码,实现点击后,使标题分别变色。
时间: 2024-09-07 10:05:48 浏览: 21
为了实现在网页上点击按钮改变标题颜色的功能,我们可以创建HTML结构,然后编写JavaScript来添加事件监听器。这是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题颜色切换</title>
<style>
.title {
color: black;
}
</style>
</head>
<body>
<h1 id="myTitle">默认标题颜色</h1>
<button onclick="changeColorToRed()">红色按钮</button>
<button onclick="changeColorToBlue()">蓝色按钮</button>
<script>
function changeColorToRed() {
var title = document.getElementById('myTitle');
title.style.color = 'red';
}
function changeColorToBlue() {
var title = document.getElementById('myTitle');
title.style.color = 'blue';
}
</script>
</body>
</html>
```
在这个例子中:
- `<h1>`标签用于显示标题,`id="myTitle"`使得我们可以通过JavaScript轻松获取到它。
- 每个按钮都有一个`onclick`属性,当按钮被点击时,会触发相应的函数:`changeColorToRed()` 或 `changeColorToBlue()`。
- JavaScript函数`changeColorToRed()` 和 `changeColorToBlue()` 分别将标题的颜色设置为红色和蓝色。