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