it-swarm.dev

الوصول إلى المغلق ": بعد" محدد مع مسج

لدي المغلق التالي:

.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'
        }
    )
194
dmr

لا يمكنك معالجة :after ، لأنها ليست جزءًا من الناحية الفنية من DOM وبالتالي لا يمكن الوصول إليها بواسطة أي JavaScript. لكنك {يمكن أضف فصلًا جديدًا مع تحديد :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');

UPDATE: في حين أنه من المستحيل مباشرة تعديل محتوى :after ، هناك طرق لقراءة و/أو تجاوزه باستخدام JavaScript. راجع"معالجة العناصر الزائفة في CSS باستخدام jQuery (على سبيل المثال: قبل و: بعد)"للحصول على قائمة شاملة بالتقنيات.

250
Blazemonger

يمكنك إضافة نمط لـ: after a html code.
فمثلا:

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

إذا كنت تستخدم jQuery مضمنًا after() مع قيمة فارغة ، فسيؤدي ذلك إلى إنشاء كائن ديناميكي يطابق محدد CSS الخاص بـ :after.

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

انظر مسج الوثائق .

10
unpezvivo