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

Question

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

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

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

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 完成，那么毫无疑问，不用 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/