0

jQuery が CSS 疑似要素を直接操作できないことはわかっています。また、私の質問に答えない投稿をここでたくさん読みました。

フィールドの値を使用して疑似要素の CSS を変更する必要があります。

私のプロジェクトには、:before を使用してテキストの前に表示されるアイコンがあります。ユーザーがフィールドの値を変更すると、そのアイコンのフォントサイズが動的に変更される必要があります。

スクリプトの基本は理解しましたが、変更のたびにフォント サイズを変更することはできません。例 (#base_size は整数値のフィールド、a:before はアイコンを挿入した疑似要素):

$('#base_size').change(function() {
    var baseSize = $(this).attr('value');
    document.styleSheets[0].insertRule('.item a:before { font-size:' + baseSize + 'px !important; }');
});

この特定の jQuery はフォント サイズを変更しますが、初回のみです。#base_size をさらに変更しても疑似要素には影響しませんが、変更するたびに新しい CSS ルールが作成されます。奇妙なことに、Chrome 開発ツールは ".item a::before" (変更ごとに 1 つ) を 2 つのコロンと宣言なしで表示します。

私はおそらくこれについてすべて間違った方法で進んでいます。どんな助けにもとても感謝します！

4

1 に答える 1

-1

スタイルシートを使う理由

代わりに CSS を変更してみてください。

$('#base_size').change(function() {
    var baseSize = this.value;
    $('.item a:before').css({ 'font-size': baseSize + 'px' });
});
于 2013-07-15T15:37:52.913 に答える