استخدم JavaScript للحصول على سمات العناصر الزائفة
يعرف الجميع كيفية الحصول على قيمة نمط CSS من خلال سمة النمط لعنصر ، ولكن هل يمكن أن تحصل على قيمة السمة للعنصر الزائف؟ نعم ، يمكنك أيضًا الوصول إلى العناصر الزائفة في الصفحة باستخدام JavaScript.
نسخة الكود كما يلي:
// احصل على قيمة لون .element: قبل
var color = window.getComputedStyle (
document.queryselector ('. element') ، ': قبل'
) .getPropertyValue ('color') ؛
// احصل على قيمة المحتوى لـ .element: قبل
var content = window.getComputedStyle (
document.queryselector ('. element') ، ': قبل'
) .getPropertyValue ('content') ؛
هل رأيته؟ يمكنني الوصول إلى قيمة سمة المحتوى في العناصر الزائفة. إذا كنت ترغب في إنشاء موقع ويب ديناميكي وأنيق ، فهذه تقنية مفيدة للغاية!
Classlist API
العديد من مكتبة أدوات JavaScript لديها AddClass و RemoveClass و ToggleClass. من أجل أن تكون متوافقة مع المتصفحات القديمة ، تستخدم مكتبات الفصل هذه الطرق للبحث عن اسم الفصل ، وإلحاق وحذف هذا الفصل ، ثم تحديث اسم الفئة. في الواقع ، هناك واجهة برمجة تطبيقات جديدة توفر طرقًا لإضافة وحذف وعكس سمات فئة CSS ، تسمى قائمة الفئة:
نسخة الكود كما يلي:
mydiv.classlist.add ('mycssclass') ؛ // يضيف فئة
mydiv.classlist.remove ('mycssclass') ؛ // يزيل الفصل
mydiv.classlist.toggle ('mycssclass') ؛ // تبديل الفصل
تنفذ معظم المتصفحات واجهة برمجة تطبيقات قائمة الفصل في وقت مبكر جدًا ، وأخيراً قامت IE10 بتنفيذها أيضًا.
إضافة وحذف قواعد النمط مباشرة إلى أوراق النمط
نحن جميعًا على دراية باستخدام element.style.propertyName لتعديل الأنماط. يمكن أن يساعدنا استخدام JavaScript في القيام بذلك ، ولكن هل تعرف كيفية إضافة أو إصلاح قاعدة نمط CSS موجودة؟ في الواقع بسيطة جدا.
نسخة الكود كما يلي:
وظيفة addcssrule (ورقة ، محدد ، القواعد ، الفهرس) {
if (sheet.insertrule) {
seat.inserTrule (Selector + "{" + Rules + "}" ، index) ؛
}
آخر {
sheet.addrule (المحدد ، القواعد ، الفهرس) ؛
}
}
// استخدمه!
addcssrule (document.stylesheets [0] ، "header" ، "float: left") ؛
عادةً ما يتم استخدام هذه الطريقة لإنشاء قاعدة نمط جديدة ، ولكن يمكنك القيام بذلك إذا كنت ترغب في تعديل قاعدة موجودة.
تحميل ملفات CSS
يعد تحميل الصور الكسول للصور ، JSON ، البرامج النصية ، وما إلى ذلك طريقة جيدة لتسريع عرض الصفحة. يمكننا استخدام Curl.js وغيرها من اللوادر JavaScript لتأخير تحميل هذه الموارد الخارجية. ولكن هل تعلم أنه يمكن أيضًا تأخير أوراق نمط CSS ، وسيتم إخطار وظيفة رد الاتصال بعد نجاح الحمل.
نسخة الكود كما يلي:
حليقة(
[
"مساحة الاسم/myWidget" ،
"مساحة الاسم/الموارد/mywidget.css"
]
وظيفة (myWidget) {
// يمكنك العمل على myWidget
// لا توجد إشارة إلى ملف CSS هنا لأنه ليس ضروريًا ؛
// نحن فقط بحاجة إلى تحميلها على الصفحة
}
}) ؛
البرنامج النصي الذي يسلط الضوء على بناء جملة Prismjs الذي يستخدمه هذا الموقع هو التحميل كسول. عندما يتم تحميل جميع الموارد ، سيتم تشغيل وظيفة رد الاتصال ، ويمكنني تحميلها في وظيفة رد الاتصال. مفيد جدا!
حدث مؤشر الماوس CSS
سمة مؤشرات المؤشر لحدث مؤشر الماوس CSS مثيرة للغاية. فعاليتها تشبه إلى حد كبير JavaScript. عندما تقوم بتعيين هذه السمة على لا شيء ، يمكن أن تمنع تعطيل العنصر بشكل فعال. قد تقول "ماذا في ذلك؟" ، ولكن في الواقع ، يحظر أي أحداث جافا سكريبت أو وظائف رد الاتصال على هذا العنصر!
نسخة الكود كما يلي:
.disabled {مؤشر أحداث: لا شيء ؛ }
انقر على هذا العنصر وستجد أنه لن يتم تشغيل أي حدث من قبل أي مستمع وضعت على هذا العنصر. ميزة سحرية ، حقًا - لا تحتاج إلى التحقق مما إذا كان هناك فئة CSS معينة من أجل منع الحدث.
ما سبق هي 5 طرق للتفاعل مع JavaScript و CSS من قبلي. إذا كان لديك أي منها أفضل ، فالرجاء إخباري. سيتم تحديث هذه المقالة بشكل مستمر.