Question

当使用内联css处于活动状态（即Clicked）时，有没有办法更改按钮的背景颜色和/或边框颜色？

＆＃13;

<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">

＆＃13;

这样的东西，但是当点击按钮时？

Answer 1

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

Answer 2

考虑到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>

只是一个注释，内联样式或内联javascript不是一个好习惯，如果可以，请使用css：

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

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

2 个答案: