245

私は次のcssを持っています:

.pageMenu .active::after {
    content: '';
    margin-top: -6px;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 14px solid white;
    border-left: 14px solid transparent;
    border-bottom: 14px solid white;
    position: absolute;
    right: 0;
}

jQuery を使用して、上下の境界線の幅を変更したいと考えています。この要素にアクセスするには、どのセレクターを使用すればよいですか? 以下を試してみましたが、うまくいかないようです。

$('.pageMenu .active:after').css(
        {
            'border-top-width': '22px',
            'border-left-width': '22px',
            'border-right-width': '22px'
        }
    )
4

3 に答える 3

323

を操作することはできませ:afterん。技術的には DOM の一部ではないため、どの JavaScript からもアクセスできないためです。ただし、 new を指定して新しいクラスを追加でき:afterます。

CSS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

JS:

$('.pageMenu .active').toggleClass('changed');

更新:コンテンツを直接変更することは不可能:afterですが、JavaScript を使用して読み取りおよび/またはオーバーライドする方法があります。テクニックの包括的なリストについては、「jQuery を使用した CSS 疑似要素の操作 (例: :before および :after)」を参照してください。

于 2013-07-22T13:40:40.230 に答える
70

like html コードの:afterにスタイルを追加できます。
例えば：

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');
于 2014-06-24T09:50:19.240 に答える
7

空の値で組み込みの jQuery を使用すると、 CSS セレクターafter()に一致する動的オブジェクトが作成されます。:after

$('.active').after().click(function () {
    alert('clickable!');
});

jQuery のドキュメントを参照してください。

于 2015-02-11T23:38:19.077 に答える