在 JavaScript 中更改按钮颜色

1. HTML 中的按钮
2. 在 JavaScript 中使用 style.background 更改按钮颜色

本文将指导你通过各种方法更新按钮颜色，以便你可以轻松开始更新网站上的按钮。

HTML 中的按钮

按钮是任何网站的重要组成部分。你需要它们来执行各种功能，从发送信息和访问更多内容到链接到网站的不同部分。

HTML 为你提供了几种向网站添加按钮的方法：按钮标签、锚链接以及按钮和提交输入类型。

HTML 中的 <button> 标签定义了可以点击的按钮。 <button> 标签用于发送内容。

图像和文本内容可以放在 <button> 标记内。按钮可以使用 CSS 设置样式。

在 JavaScript 中使用 style.background 更改按钮颜色

getElementById() 是 JavaScript 提供的集成文档方法，它返回 id 与指定 id 匹配的元素对象。

语法：

getElementById($id)

$id 是一个强制参数，它指定必须匹配的 HTML 属性的 id。如果找到对应的元素，则返回对应的 DOM 元素对象；否则，它返回 null。

现在，让我们使用 getElementById() 提取按钮节点元素。

<button onclick="changeColor()" id="btn">Change color</button>

function changeColor() {
    document.getElementById("btn").style.background='#5e2e2e';
}

在 changeColor 函数中，我们使用 getElementById 找出 DOM 中存在的按钮元素。找到按钮节点后，提取样式对象并使用所需颜色更新背景属性。

ReadOnly 样式属性以 CSSstyledClaration 对象的形式返回元素的在线样式，该对象包含在线样式属性的属性中定义的属性的样式的所有特征的列表。

现在让我们运行上面的代码并点击 Change color 按钮。它会改变按钮的颜色，看起来像这样。

输出：