css控制点击button后样式改变，且在点击别处，样式为改变厚的样式

你可以使用CSS的:focus伪类来控制按钮在被点击后的样式改变。同时，你可以使用JavaScript来监听点击其他地方的事件，并在触发事件时移除按钮的:focus状态，从而恢复默认样式。以下是一个示例代码：

HTML:

<button id="myButton">点击我</button>

CSS:

#myButton {
  /* 默认样式 */
  background-color: blue;
  color: white;
}

#myButton:focus {
  /* 点击后的样式 */
  background-color: red;
  color: yellow;
}

JavaScript:

document.addEventListener('click', function(event) {
  var button = document.getElementById('myButton');
  if (event.target !== button) {
    button.blur(); // 移除按钮的:focus状态
  }
});

这样，当你点击按钮时，按钮会改变样式，而当你点击页面其他地方时，按钮的样式将恢复为默认样式。

相关问题

css控制点击button后样式改变，且在点击别处，样式依然为改变后的样式

要实现点击按钮后样式的改变，并在点击别处后继续保持改变后的样式，可以使用JavaScript来控制CSS样式的变化。以下是一个示例：

HTML代码：

<button id="myButton">点击我</button>
<div id="otherArea">点击别处</div>

CSS代码：

.bold {
  font-weight: bold; /* 样式改变后的样式 */
}

JavaScript代码：

const button = document.getElementById("myButton");
const otherArea = document.getElementById("otherArea");

button.addEventListener("click", function() {
  button.classList.add("bold"); // 添加CSS类名，应用样式改变
});

document.addEventListener("click", function(event) {
  if (event.target !== button && event.target !== otherArea) {
    button.classList.remove("bold"); // 移除CSS类名，恢复原样式
  }
});

在这个示例中，我们使用JavaScript来监听按钮的点击事件。当按钮被点击时，我们向按钮添加了一个名为"bold"的CSS类名，从而应用样式改变。然后，我们监听整个文档的点击事件，当点击的目标不是按钮和其他区域时，我们从按钮中移除"bold"类名，以恢复原样式。

这样，无论点击按钮后点击别处，样式都会保持为改变后的样式。请注意，您需要将JavaScript代码放置在适当的位置，例如在页面加载完成后执行或放置在外部的JavaScript文件中。

微信小程序点击改变css,微信小程序按钮button样式修改自定义

要在微信小程序中改变CSS样式或者自定义按钮样式，可以使用WXML和WXSS。

1. 在WXML文件中，可以使用class或者style属性来设置元素的样式。例如：

<view class="my-class"></view>
<view style="color: red; font-size: 16px;"></view>

2. 在WXSS文件中，可以定义CSS样式规则，然后在WXML中使用class属性来引用这些规则。例如：

.my-class {
  color: blue;
  font-size: 18px;
}

3. 自定义按钮样式可以通过修改button组件的CSS样式来实现。例如：

button {
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}

然后在WXML中使用button组件，并且设置class属性为自定义的样式类名即可：

<button class="my-button">点击我</button>

.my-button {
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  padding: 10px 20px;
}

这样就可以自定义按钮的样式了。