如何在JavaScript中点击按钮修改p标签的背景颜色？

这里提供两种常用的实现方式，你可以根据需求选择：

方法一：直接通过JS设置行内样式 #

直接获取页面中的<p>元素，修改其backgroundColor样式属性即可。如果页面有多个<p>，可以用querySelectorAll遍历设置：

修改后的JS代码：

function button(){
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function onClick(event) {
    // 修改全局文本颜色
    document.body.style.color = 'red';
    // 获取所有p元素并设置背景色
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(p => {
      p.style.backgroundColor = 'yellow'; // 替换为你需要的颜色值，支持十六进制、RGB等格式
    });
  });
}    
button();

如果页面只有一个<p>元素，也可以简化为：

document.querySelector('p').style.backgroundColor = 'yellow';

方法二：通过添加CSS类（推荐） #

这种方式更利于样式维护，避免行内样式混乱。先在CSS中定义背景色类，再通过JS给<p>元素添加该类：

修改后的HTML（新增CSS类）：

<style>
  p{
      box-sizing: border-box;
      border: 1px solid black;
      height: 20px;
      width: 300px;
      text-align: center;
  }
  /* 定义背景色类 */
  .highlight-bg {
      background-color: lightblue;
  }
</style>

<p>Welcome To My Domain</p>
<button id="btn">Button</button>

修改后的JS代码：

function button(){
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function onClick(event) {
    document.body.style.color = 'red';
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach(p => {
      p.classList.add('highlight-bg');
      // 若需要点击切换背景色，可改用 toggle 方法：p.classList.toggle('highlight-bg');
    });
  });
}    
button();

内容的提问来源于stack exchange，提问作者M.S