Question

在javascript中，您可以直接从html元素轻松执行onclick事件：

<div onclick="..javascript here.."></div>

我知道您可以使用＆lt; 样式＆gt;更改css样式标签，但我想知道你是否能够像下面的例子那样执行它：

<div onclick="..css here.."></div>

Answer 1

如果你想纯粹通过css完成，你必须使用:active或:focus：

div:hover  { color: red; }  /* mouse-over */
div:active { color: red; }  /* mouse-down (this cause also focus) */
input:focus{ color: red; }  /* got focus (by tab key or mouse-down) */

/* for <a> element: */
a:link    { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */

注意： :active在用户释放没有焦点的元素的鼠标按钮（如div）之后不会永久保留，但它适用于像文本这样的元素输入或按钮。它有一个名为"Checkbox Hack"的解决方法，您可以使用连接标签和复选框输入以及您尝试控制的其他元素。

此外，如果要更改css类或内联样式，可以执行以下操作：

 <div onclick="this.style['border'] = '2px solid red';">Click me</div>

Answer 2

有，但元素需要有tabindex属性。

您可以使用元素上的tabindex：

element:focus {
 /* some_CSS; */
}

'some_CSS'将在单击元素时启动。

Answer 3

您可以使用javascript更改div或任何其他元素的样式。但我不知道是否有办法通过onclick事件更改css而不使用javascript。

我可以解释一下我的方法。

<script>
function change_css(){ 
 document.getElementById('change_css').className='newClassName';
}
</script>
<div onclick="change_css()" class="initial_class">content</div>

上面的代码将帮助您通过更改类来更改样式，前提是您已经使用css创建了一个类。它替换了该div之前提供的所有类，并添加了新类。

要在div中添加其他类而不替换现有类，请在javascript中使用以下语句：

document.getElementById('change_css').className+='  newClassName';

是否有来自html元素的css等效onclick？

3 个答案: