前回の「jQueryでCSS擬似要素にアクセスする方法」に引き続きCSSの擬似要素についてのメモです。

擬似要素にはcontentというプロパティがあり頻繁に使うことがあるのですが、
今回はこのプロパティの値を動的に変更する方法をご紹介いたします。

実は疑似要素にはattr()なんて機能があって、下記のようにアクセス出来ます。

<html>
	<head>
		<title>JavaScriptでCSS擬似要素のcontentにアクセスする方法</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="hoge"></div>
		<input type="button" id="btn" value="click">
		<script src="script.js"></script>
	</body>
</html>
#hoge:before{
	display:block;
	content:attr(data-content);
	width:160px;
	height:90px;
	color:white;
	background:red;
}
(function(){
	var target = document.getElementById('hoge')
		,button = document.getElementById('btn');
	button.addEventListener('click',function(){
		target.setAttribute('data-content','this is before content');
	},false);
}());

相変わらず特殊すぎますね…。
ちなみにdata-●●のdata-より後ろは任意の名前に出来ますので、
変更してご活用ください。