如何使用内联 CSS 更改处于活动状态的按钮的颜色？答案

【问题标题】：How to change color of button in active state using inline CSS?如何使用内联 CSS 更改处于活动状态的按钮的颜色？
【发布时间】：2016-09-22 21:01:55
【问题描述】：

当按钮处于活动状态（即点击）时，是否有任何方法可以使用内联 css 更改按钮的背景颜色和/或边框颜色？

&lt;button class="btn btn-xs btn-primary btn-inverse dropdown-toggle" type="button" data-toggle="dropdown" style="margin-top: 12px; background-color: rgba(0, 0, 0, 0); border-color:rgba(0, 0, 0, 0); margin-right:20px"&gt;

类似这样的东西，但在单击按钮时？

【问题讨论】：

不...不可能...您只能为默认状态提供内联 css...不同所需的任何更改都必须在样式表中或必须在样式标签内
如何在样式标签内完成？
使用 :active 选择器
这应该是stackoverflow.com/questions/28712267/…的可能重复项

标签： html css twitter-bootstrap-3

【解决方案1】：

考虑到 css :active 只是一个 css 伪类 而不是 Dom property or attribute 你不能有一个内联等效项。

但是，如果在你的情况下，点击事件可能是一个有效的选择，你可以做类似的事情......

<script>
  function toggleBg(element, color) {
    if(!color) {
      color = element.dataset.normalColor;
    } else {
      element.dataset.normalColor = element.style.backgroundColor;
    }

    element.style.backgroundColor = color;
  }
</script>

<button onmousedown="toggleBg(this,'red')" onmouseup="toggleBg(this)">RED ON PRESS</button>

请注意，inline-styling 或 inline-javascript 不是一个好习惯，如果可以，请使用 css：

<style>
  button:active { background: red; }
</style>

<button>RED WHEN ACTIVE</button>

【讨论】：

感谢您的回复。为什么内联样式不是上帝的做法？
stackoverflow.com/questions/2612483/…

【解决方案2】：

当按钮处于活动状态（即单击）时，您不能使用内联 css 更改按钮的背景颜色和/或边框颜色，您可以在 calss 中使用:active 更改背景颜色或边框颜色

【讨论】：

感谢您的回答！我们无法访问 btn:active inline 有什么原因吗？
我认为我们不能使用 btn:active 是单击按钮后将发生的事件，并且只能由 css 或 js 通过触发它等等。简而言之，该类将是不能通过内联正确渲染，所以我们不能使用它。