JavaScript للحصول على مدونة تنفيذ سمات العناصر الزائفة CSS

العناصر الزائفة CSS قوية للغاية وغالبًا ما تستخدم لإنشاء تلميحات مثلث CSS. يمكن أن يحقق استخدام العناصر الزائفة CSS بعض التأثيرات البسيطة دون الحاجة إلى إضافة علامات HTML إضافية. شيء واحد هو أن JavaScript لا يمكن أن تحصل على قيم سمة CSS هذه ، ولكن الآن هناك طريقة للحصول على:

ألقِ نظرة على رمز CSS التالي:

 .element: قبل {content: 'new' ؛ اللون: RGB (255 ، 0 ، 0) ؛}. العنصر: قبل {المحتوى: 'جديد' ؛ اللون: rgb (255 ، 0 ، 0) ؛}

من أجل الحصول على سمة اللون من .element: من قبل ، يمكنك استخدام الكود التالي:

 var color = window.getComputedStyle (document.queryselector ('. element') ، ': قبل'). getPropertyValue ('color') var color = window.getComputedStyle (document.queryselector ('. element') ، ': قبل'). getPropertyValue ('color')

تمرير العناصر الزائفة باعتبارها المعلمة الثانية إلى النافذة. ضع هذا الرمز في مجموعة وظيفة الأداة الخاصة بك. ستكون هذه الطريقة مفيدة حيث يتم دعم العناصر الزائفة من قبل المزيد والمزيد من المتصفحات.

ملاحظة المترجم: لا يتم دعم طريقة window.getComputedStyle في المتصفحات أدناه IE9 ، ويجب استخدام GetPropertyValue مع طريقة getComputedStyle. يدعم IE سمة CurrentStyle ، لكنها لا تزال لا تستطيع الحصول على خصائص العناصر الزائفة.

طريقة للحصول على قيمة سمة CSS بدقة للعنصر المحدد.

 <script type = "text/javaScript"> وظيفة getStyle (elem ، name) {// إذا كانت الخاصية موجودة في النمط [] ، فقد تم تعيينها مؤخرًا (وهي الواردة الحالية) إذا (elem.style [name]) {return elem.style [name] ؛ } // خلاف ذلك ، جرب ie else if (elem.currentStyle) {return elem.currentStyle [name] ؛ } // أو طريقة W3C ، إذا كانت موجودة أخرى إذا كان (document.defaultView && document.defaultView.getComputedStyle) {// يستخدم طريقة الكتابة العادية "المحاذاة" التقليدية ، بدلاً من "textalign" name = name.replace (/([az])/g ، "-$ 1") ؛ name = name.toLowerCase () ؛ // احصل على كائن النمط واحصل على قيمة الخاصية (إذا كانت موجودة) var s = document.defaultView.getComputedStyle (elem ، "") ؛ إرجاع S && S.GetPropertyValue (الاسم) ؛ // وإلا ، فهو يستخدم متصفحًا آخر} آخر {return null ؛ }} </script>