js点击按钮切换按钮颜色和字体颜色

在JavaScript中，你可以通过给按钮添加点击事件监听器来实现点击按钮切换其颜色和字体颜色的功能。这里是一个简单的示例：

<button id="myButton" style="background-color: blue; color: white;">点击我</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
  // 切换背景色
  this.style.backgroundColor = this.getAttribute('data-new-color') || 'red';
  
  // 切换字体颜色
  this.style.color = this.getAttribute('data-new-font-color') || 'black';

  // 如果没有指定新的颜色数据，可以设置默认值或者其他自定义值
});

在这个例子中，首先我们获取id为`myButton`的按钮元素，并为其添加了一个点击事件。当按钮被点击时，会执行函数内的代码。我们通过`this.getAttribute('data-new-color')`来获取`data-new-color`属性的值，如果没有设置这个属性，就使用默认的颜色值。

为了实现颜色的切换，你需要在HTML中为按钮添加额外的`data-new-color`和`data-new-font-color`属性，并分别设置它们的初始颜色值，例如：

<button id="myButton" style="background-color: blue; color: white;" data-new-color="green" data-new-font-color="yellow">点击我</button>

这样，每次点击后，按钮的颜色和字体颜色就会按照设定的规则变化。