web-dev-qa-db-ja.com

JQueryを使ってcss "：after"セレクターにアクセスする

私は次の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'
        }
    )
jquerycssjquery-selectors
194
dmr

技術的にはDOMの一部ではないため、どのJavaScriptからもアクセスできないため、:afterを操作することはできません。しかし、あなたはcan新しい: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）"をご覧ください。

250
Blazemonger

：after のようなHTMLコードのようにスタイルを追加することができます。
例えば：

var value = 22;
body.append('<style>.wrapper:after{border-top-width: ' + value + 'px;}</style>');
52
r0mank

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

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

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

10
unpezvivo