实现HTML点击按钮改变字体颜色的功能，可以通过JavaScript和CSS的结合来实现。以下是一个简单的示例，展示了如何创建一个按钮，当用户点击该按钮时，页面上的文本颜色会改变。

lewis 2年前 (2023-01-23) 阅读数 6 #资讯

HTML部分

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击按钮改变字体颜色</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="myText">点击按钮改变我的颜色</h1>
    <button id="colorButton">改变颜色</button>
    <script src="script.js"></script>
</body>
</html>

CSS部分 (styles.css)

#myText {
    color: black;
}

JavaScript部分 (script.js)

document.getElementById('colorButton').addEventListener('click', function() {
    var text = document.getElementById('myText');
    var currentColor = text.style.color;
    if (currentColor === 'black') {
        text.style.color = 'red';
    } else {
        text.style.color = 'black';
    }
});

在这个示例中，我们首先在HTML中定义了一个标题和一个按钮，标题有一个id属性，使我们能够在JavaScript中引用它，按钮也有一个id，用于添加点击事件监听器，我们还链接了一个外部的CSS文件，用于设置初始的文本颜色。

CSS文件(styles.css)中，我们设置了#myText的color属性为black，即初始文本颜色为黑色。

在JavaScript文件(script.js)中，我们首先通过id获取了按钮元素和标题元素，我们给按钮添加了一个点击事件监听器，当按钮被点击时，事件监听器会执行一个函数，这个函数会检查当前的文本颜色，如果文本颜色是黑色，那么它会变成红色；如果文本颜色是红色或其他颜色，那么它会变回黑色，这是通过直接修改元素的style.color属性实现的。

这个示例展示了如何使用基本的HTML、CSS和JavaScript创建一个简单的交互效果，当然，实际的应用可能会更复杂，涉及到更多的元素和更复杂的逻辑，这个示例应该为你提供了一个良好的起点。