いつもブログ記事は朝書いているので、寝ぼけたままな状態の時も多いのですが、最近は朝散歩をするようにして、今朝は汗だく汁だく状態で書いています。
散歩中に、「今日は何を書こうかな〜〜〜」と考えながら、PODCASTを聞いたり、近所の風景でネタ探しをしているのが、なんだかとっても幸せな気分になります。
そして大体が、今やっている仕事の技術ネタを書くことになってしまうんですが、cssの疑似要素にクリックイベントがセットできたらいいな〜って考えていたんですが、javascriptからはどうやっても擬似要素にはアタッチできないという事もリファレンスページから理解することができました。
他のサイトでもjavascriptで疑似要素を作ったり、コントロールしたりする方法がいくつか書かれていましたが、「疑似要素はDOMではない」ということから、裏技的な扱いしかないのが非常に残念でした。
疑似要素の理解
javascriptで、疑似要素のcontent内容を取得する方法は以下のページに書かれていました。 http://ithat.me/2016/09/29/js-jquery-pseudo-element-property-get-and-set "getComputedStyle"関数でエレメントを選択してcss記述を拾うことができるようですね。 細かい話ですが、IEは別のソースにしないといけないかも・・・ 他のページには、classやdata属性をjavascriptで可変にすることで疑似要素のcssコードを変更したり、アニメーションさせたりする方法が記述しているページがほとんどだったので、やはりjavascriptと疑似要素との相性はあまり良くないということが理解できます。hoverは普通に対応できる
クリックイベントはできないけれど、cssのhoverには疑似要素は対応しているようです。<html>
<head>
<title>Clone</title>
<style>
#elm{
cursor:pointer;
}
#elm:before{
content:"@@@";
}
#elm:hover:before{
color:blue;
}
</style>
</head>
<body>
<div id="elm">element-view</div>
</body>
</html>
ただし、これはDOM要素部分のhoverに対して疑似要素をセットすることができるということで、実際にサンプルコードを実行すると、疑似要素部分の文字列をhoverアクションで色変更するようにしています。
See the Pen js-pseudo by YugetaKoji (@geta1972) on CodePen.
注意点としては、 "#elm:hover:before"が、"#elm:before:hover"となっていては、全く動作しません。あくまでhoverした状態のbeforeという扱いです。
