Accesați selectorul css „:after” cu jQuery [duplicat] (Programare, Jquery, Css, Jquery Selectori)

dmr a intrebat.
a intrebat.

Am următorul 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;
}

Aș dori să schimb lățimea marginii de sus, stânga și jos folosind jQuery. Ce selector să folosesc pentru a accesa acest element? Am încercat următoarele, dar nu pare să funcționeze.

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

Comentarii

  • Aruncați o privire la acest răspuns stackoverflow.com/questions/5041494/… –  > Por BigBadOwl.
  • Nu puteți prin JQuery, dar puteți cu JavaScirpt (Accesarea regulilor CSS) stackoverflow.com/questions/15087736/… – –  > Por Ali Bassam.
  • @AliBassam Ceea ce tocmai ai spus nu are sens. jQuery ESTE Javascript (De fapt, o bibliotecă de convenții pentru acesta, dar sper că ai înțeles ideea). –  > Por Kroltan.
  • Iată o soluție superbă, cu mai multe opțiuni, inclusiv cea de mai jos a lui @blazemonger: stackoverflow.com/questions/5041494/… –  > Por David Hobs.
3 răspunsuri
Blazemonger

Nu puteți manipula :after, deoarece nu face parte din punct de vedere tehnic din DOM și, prin urmare, este inaccesibil de către orice JavaScript. Dar puteți puteți adăugați o nouă clasă cu o nouă clasă :after specificată.

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');

UPDATE: în timp ce este imposibil să direct modificați direct :after conținutul, există modalități de a citi și/sau de a-l suprascrie folosind JavaScript. A se vedea „Manipularea pseudo-elementelor CSS utilizând jQuery (de exemplu, :before și :after)” pentru o listă completă de tehnici.

Comentarii

r0mank

Puteți adăuga stilul pentru :after a ca și codul html.
De exemplu:

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

Comentarii

  • Acest lucru este util pentru proprietățile dinamice. Vă mulțumim! –  > Por Hugo H.
  • În jQuery: $( "<style>.wrapper:after { border-top-width: " + value + "px; }</style>" ).appendTo( "head" ) –  > Por SuN.
  • Funcționează perfect mulțumiri SuN ! –  > Por Barry Connolly.
unpezvivo

Dacă utilizați jQuery încorporat after() cu o valoare goală, acesta va crea un obiect dinamic care se va potrivi cu obiectul dvs. :after CSS selector.

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

Consultați documentația jQuery.

Comentarii

  • acest lucru nu funcționează, dar este o idee bună totuși –  > Por Pixelomo.
  • Funcționează pentru mine în Firefox, Chrome și Safari –  > Por sagesolutions.
  • Nu funcționează pentru CSS, dar îmi permite să direcționez evenimentul click pe un tag :after –  > Por Paul Ledger.
  • jquery after nu este menit să manipuleze proprietatea css „:after”, ci elementul în sine. –  > Por Gilberto Albino.
  • linkul tău către documentația jQuery explică faptul că răspunsul tău este pur și simplu greșit –  > Por Jan Stanicek.