52

JS によって動的に変更される CSS によって構築されたグラフがあります。疑似要素ごとにグラフの最大値を次のように表示します。

.graph:before {
    content:""; //value that want set by JS
    position:absolute;
    top:0;
    left:0;
}

そのため、JS でこの値を設定する必要があります。試してみ$(".graph:before").css("content", hh);ましたが、役に立ちませんでした。その値を取得する方法は？

4

8 に答える 8

36

更新（2018）：コメントに記載されているように、これを実行できるようになりました。

疑似要素はDOMの一部ではないため、JavaScriptを使用して変更することはできません。最善の策は、CSSで必要なスタイルを使用して別のクラスを定義し、それを要素に追加することです。あなたの質問からそれは可能ではないように思われるので、おそらくあなたは疑似要素の代わりに実際のDOM要素を使用することを検討する必要があります。

于 2012-05-08T08:37:40.837 に答える
5

同じ問題の解決策をまだ探している人は、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>

この例は、ボタンをクリックする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後で簡単に取り出せるように、要素自体にも属性を設定していることに注意してください。button: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>

役立つことを願っています

于 2016-11-14T13:42:17.877 に答える