在之后添加帶有 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的所有實例之后添加一個可單擊的文本。