之后使用css伪元素添加onclick [英] Add onclick with css pseudo-element after

问题描述

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

Is it possible in my css file to do something like that?:

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

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

I want to add after all instances of myclass a clickable text, in the css style sheet.

推荐答案

是吗可能在我的css文件中做类似[请参见上面的代码]的操作？

Is it possible in my css file to do something like [see code above]?

否

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

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

HTML has control of the data within the webpage. Any CSS or JS is specified via the HTML. It's the Model.

CSS 可以控制样式，没有CSS与HTML或JavaScript之间的链接。这是视图。

CSS has control of the styles, there is no link between CSS and HTML or JavaScript. It's the View.

JavaScript 可以控制网页中的互动，并具有到所有DOM节点的钩子。它是 Controller 。

JavaScript has control of the interactions within the webpage, and has hooks to any and all DOM nodes. It's the Controller.

由于此MVC结构：HTML属于 .html 文件，CSS属于 .css 文件，而JS属于 .js 文件。

Because of this MVC structure: HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files.

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

CSS pseudo-elements do not create DOM nodes. There is no direct way for JavaScript to access a pseudo-element defined in CSS, and there's no way to attach an event to said pseudo-elements.

如果您已经有了一个固定的结构，并且不能添加在HTML中生成新链接所需的其他内容，JavaScript可以动态添加必要的新元素，然后可以通过CSS对其进行样式设置。

If you've got a set structure in place, and can't add the additional content necessary to produce new links within the HTML, JavaScript can dynamically add the new elements necessary which can then be styled via CSS.

jQuery非常简单：

jQuery makes this very simple:

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

这篇关于之后使用css伪元素添加onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！