javascript - 之后使用CSS伪元素添加onclick(Add onclick with css pseudo-element after)

Question

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

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

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

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

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

  ask by Oli translate from so

Answer 1

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

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

No

(没有)

The important question to ask is why .

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

HTML has control of the data within the webpage.

(HTML可以控制网页中的数据 。)

Any CSS or JS is specified via the HTML.

(通过HTML指定任何CSS或JS。)

It's the Model .

(这是模型 。)

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

(CSS可以控制样式 ，CSS与HTML或JavaScript之间没有链接。)

It's the View .

(这是View 。)

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

(JavaScript可以控制网页内的交互 ，并且具有到任何和所有DOM节点的挂钩。)

It's the Controller .

(是控制器 。)

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

(由于这种MVC结构：HTML属于.html文件，CSS属于.css文件，而JS属于.js文件。)

CSS pseudo-elements do not create DOM nodes.

(CSS伪元素不会创建DOM节点。)

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.

(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.

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

jQuery makes this very simple:

(jQuery使这个变得非常简单：)

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