たぼさんの部屋

いちょぼとのんびり

jsで:before :after疑似要素にアクセスする

cssで:before, :after疑似セレクタを使うと、そのオブジェクトの前後に要素を作成できます。

その要素はDOM上に存在するわけじゃないので、じゃあどうやってjavascriptでアクセスするの？っていう話。

実は疑似要素にはattr()なんて機能があって、下のgist codeみたいな感じでアクセスできます。

<html>
  <head>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <div id='target'></div>
    <input id='button' type='button' value='click'>
    <script src='script.js'></script>
  </body>
</html>

js

(function () {
  var target = document.getElementById('target')
    , button = document.getElementById('button');
 
  button.addEventListener('click', function () {
    target.setAttribute('data-content', 'this is before content');
  }, false);
}());

css

#target:before {
  display: block;
  content: attr(data-content);
  width: 160px;
  height: 90px;
  color: white;
  background: red;
}