グラフはCSSで構成し、JSで動的に変化させるようにしています。グラフの最大値を擬似要素で表示している。
.graph:before {
content:""; //value that want set by JS
position:absolute;
top:0;
left:0;
}
そのため、JSでこの値を設定する必要があります。私は $(".graph:before").css("content", hh);
を試しましたが、役に立ちませんでした。どうすればその値を取得できるのでしょうか?
CSSのattr()
関数を使って、JSでcontent
の値を指定することができます。
以下のように、JavaScriptを使用するか、jQueryを使用するかの2つのオプションがあります。
jQueryを使用する。
$('.graph').on('click', function () {
//do something with the callback
$(this).attr('data-before','anything'); //anything is the 'content' value
});
JavaScript。
var graphElem = document.querySelector('.graph');
graphElem.addEventListener('click', function (event) {
event.target.setAttribute('data-before', 'anything');
});
CSS。
.graph:before {
content: attr(data-before); /* value that that refers to CSS 'content' */
position:absolute;
top: 0;
left: 0;
}
更新(2018年):コメントで指摘されているように、現在はできるようになりました。
擬似要素はDOMの一部ではないので、JavaScriptで修正することはできません'。最善の方法は、CSSで必要なスタイルを持つ別のクラスを定義し、それを要素に追加することです。あなたの質問ではそれができないようなので、おそらく擬似要素の代わりに本物のDOM要素を使うことを検討する必要があるでしょう。
同じ問題を解決する方法を探している人は、jQueryを使用して次のようにすることができます。
<button id="changeBefore">Change</button>
<script>
var newValue = '22';//coming from somewhere
var add = '<style>.graph:before{content:"'+newValue+'"!important;}</style>';
$('#changeBefore').click(function(){
$('body').append(add);
});
</script>
この例では、ボタンをクリックすると、.graph:before
の値が変更されることを示しています。changeBeforeをクリックすると、
.graph:before` の値が、新しい動的な値に従って変更されます。
beforeや
:after` 要素のスタイルの変更、またはそのコンテンツの取得に関する詳細な説明については、こちらを参照してください。
あなたのHTMLがこのようなものだとします。
<div id="something">Test</div>
そして、CSSでその:beforeを設定し、次のようにデザインしているとします。
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}
後で簡単に取り出せるように、要素自体にcontent
属性も設定していることに注意してください。
ここで、ボタン
があり、それをクリックすると、:beforeの色を緑に、フォントサイズを30pxに変更したいと思います。そのためには、次のようにします。
必要なスタイルを持つCSSをクラス .activeS
に定義します。
.activeS:before{
color:green !important;
font-size:30px !important;
}
あとは、以下のように:before要素にクラスを追加することで、:beforeのスタイルを変更することができます。
<button id="changeBefore">Change</button>
<script>
$('#changeBefore').click(function(){
$('#something').addClass('activeS');
});
</script>
もし、:before
の内容を取得したいだけなら、次のようにすればよいでしょう。
<button id="getContent">Get Content</button>
<script>
$('#getContent').click(function(){
console.log($('#something').css('content'));//will print '1st'
});
</script>
参考になれば幸いです。