html - 如何在用户单击时设置对象样式

Question

在链接的 CSS 中，我可以设置用户点击前和用户点击后的样式。但是，当用户单击该对象然后更改其颜色时，我如何才能对简单文本或对象执行此操作。 例如

<style>
.object:onmouseclick {
background-color:green;
padding:5px; 
}
</style>

我们必须写什么来代替 onmouseclick。

Answer 1

如果您要为链接设置样式，您将使用 :active 或 :focus 但是当您在 dom 元素上使用它时，您将不得不使用 jQuery 来向单击的元素添加一个类并通过该类应用样式...

$('.object').click(function() {
  $(this).toggleClass('clicked');
});

.object {
  background-color: green;
  padding: 5px;
  cursor: pointer;
  width: 300px;
  color: orange;
}
.object.clicked {
  background-color: blue;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="object">
  <h1>The Mutants Are Revolting</h1>
  <p>Bender?! You stole the atom. That's the ONLY thing about being a slave. I am Singing Wind, Chief of the Martians. Anyhoo, your net-suits will allow you to experience Fry's worm infested bowels as if you were actually wriggling through them.</p>

</div>