JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する

jQueryにはCSSのプロパティを取得できる css() という関数がありますが、残念ながら疑似要素には対応していません。

サンプル要素

.pseudo::before 
{
  content: '疑似要素取得';
}

今回はこの要素の content の値を取得・変更していきます。

取得する

var property = window.getComputedStyle($('.pseudo')[0], '::before').getPropertyValue('content');
console.log(property);  // 疑似要素取得

JSの関数を使って疑似要素のプロパティを取得することができます。 getComputedStyle() 関数の第二引数に ::before または ::after を指定します。

変更する

JSを使う

var sheets = document.styleSheets,
    sheet = sheets[sheets.length - 1];

if (sheet.insertRule)    // Webkit
{
  sheet.insertRule('.pseudo:before { content:' + property + '"変更完了" }', sheet.cssRules.length);
}
else if (sheet.addRule)  // IE
{
  sheet.addRule('.pseudo:before', 'content:' + property + '"変更完了"', -1);
}

jQueryを使う

// head内末尾に追加
$('head').append('');