在之后添加带有 css 伪元素的 onclick

Question

是否可以在我的 css 文件中做类似的事情？：

.myclass:after{
   content:"click me";
   onclick:"my_function()";
 }

我想在myclass的所有实例之后在 css 样式表中添加一个可点击的文本。

Answer 1

是否可以在我的 css 文件中执行类似 [参见上面的代码] 的操作？

不

要问的重要问题是为什么。

HTML可以控制网页中的数据。 任何 CSS 或 JS 都是通过 HTML 指定的。 这是模型。

CSS可以控制样式，CSS 和 HTML 或 JavaScript 之间没有联系。 这是视图。

JavaScript可以控制网页内的交互，并具有与任何和所有 DOM 节点的挂钩。 这是控制器。

因为这种MVC结构：HTML属于.html文件，CSS属于.css文件，JS属于.js文件。

CSS 伪元素不会创建 DOM 节点。 JavaScript 无法直接访问 CSS 中定义的伪元素，也无法将事件附加到所述伪元素。

如果您有一个固定的结构，并且无法在 HTML 中添加生成新链接所需的额外内容，JavaScript 可以动态添加必要的新元素，然后可以通过 CSS 设置样式。

jQuery 使这变得非常简单：

$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);

Answer 2

好，

使用表达式实际上可能仅适用于 Internet Explorer。

除此以外：

不。完全不是，这不是 css 的目的和目的。

Answer 3

如果可以使用 jQuery 完成某些事情，那么可以肯定的是，没有它也可以做到。 让我们看一个数据模型：

<div id="container">
<div id="hasblock" onclick='clickFunc(this, event)'></div>
</div>

我们需要一些样式表：

<style>
div#container { width:100px; height:50px;position relative; border:none;}
div#hasblock {width:100px; height:50px;position absolute;border:solid black;}
div#hasblock::after {content:"Click me"; position: absolute; border:solid red;
top:80px;left:0px;display:block;width:100px;height:20px; font-size:18px;}
</style>

和一个代码：

<script>
function clickFunc(his, event)
{if (event.clientY>his.clientHeight){console.log("It was a click");};    }
</script>

Answer 4

使用 jQuery 的After ：

http://jsfiddle.net/PCRnj/

Answer 5

是否可以在我的css文件中执行类似的操作？：

.myclass:after{
   content:"click me";
   onclick:"my_function()";
 }

我想在css样式表中的myclass的所有实例之后添加一个可单击的文本。