تصف هذه المقالة طريقة إنشاء علامات الارتباط ديناميكيًا في رأس JavaScript. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
أعتقد أن العديد من الأصدقاء الأماميين واجهوا الحاجة إلى استخدام JavaScript لإنشاء علامات ورقة الأنماط ديناميكيًا - علامات الارتباط. سنتحدث هنا عن كيفية إنشاء علامات ارتباط في المتصفح ديناميكيًا.
إنشاء علامات ارتباط مع jQuery
إذا كنت ترغب في استخدام jQuery في التطوير ، فإن استخدام jQuery لإنشاء علامات ارتباط يجب أن يبدو مثل هذا:
نسخة الكود كما يلي: var cssurl = '/style.css' ،
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text /css" media = "' + (media || all") + '"charset ="' ' + charset || utf-8 " +'" /> ') ؛
// يرجى الاطلاع بوضوح ، إضافة علامات ارتباط ديناميكي إلى الرأس
$ ($ ('head') [0]). append (linktag) ؛
قم بإنشاء علامات ارتباط باستخدام JavaScript الأصلي
إذا كنت تحب JavaScript النقي والطبيعي ، فأنت بحاجة إلى كتابتها مثل هذا:
نسخة الكود كما يلي: var head = document.getelementsbytagname ('head') [0] ،
cssurl = '/style.css' ،
linktag = document.createElement ('link') ؛
linktag.id = 'dynamic-style' ؛
linktag.href = cssurl ؛
linktag.setattribute ('rel' ، 'StylSheet') ؛
linktag.setAttribute ('Media' ، 'All') ؛
linktag.setattribute ('type' ، 'text/css') ؛
Head.AppendChild (Linktag) ؛
ورقة IE الفريدة الإبداعية
الطريقة الفريدة لـ IE هي أيضًا مريحة للغاية.
نسخة الكود كما يلي: var head = document.getelementsbytagname ('head') [0] ،
cssurl = 'سمات/bluenight/style.css' ،
// document.createstylySheet أضافت علامة الارتباط إلى الرأس. كيف تقول ذلك ، إنه مناسب تمامًا
LinkTag = document.createsTylesheth (CSSurl) ؛
تقبل طريقة CreateStyLesHelement ([Surl] [، Iindex]) معلمتين ، و SROL هو مسار عنوان URL لملف CSS. Iindex هي معلمة اختيارية ، تشير إلى موضع الفهرس لمجموعة أوراق الأنماط المدرجة في الصفحة. بشكل افتراضي ، تتم إضافة النمط الذي تم إنشاؤه حديثًا في النهاية.
حل كامل
في الأساس ، تم تقديم جميعهم ، دعونا نلقي نظرة على الحل الكامل:
نسخة التعليمات البرمجية كما يلي: الوظيفة CreateLink (CSSurl ، lnkid ، charset ، media) {
var head = $ ($ ('head') [0]) ،
linktag = null ؛
if (! cssurl) {
العودة كاذبة
}
linktag = $ ('<link href = "' + cssurl + '" rel = "stylesheet" type = "text /css" media = "' + (media || all") + '"charset ="' ' + charset || utf-8 " +'" /> ') ؛
head.append (linktag) ؛
}
وظيفة CreateLink (CSSURL ، LNKID ، Charset ، Media) {
var head = document.getElementsByTagname ('head') [0] ،
linktag = null ؛
if (! cssurl) {
العودة كاذبة
}
linktag = document.createElement ('link') ؛
linktag.setattribute ('id' ، (lnkid || 'dynamic-style')) ؛
linktag.setattribute ('rel' ، 'StylSheet') ؛
linktag.setattribute ('charset' ، (charset || 'utf-8')) ؛
linktag.setattribute ('Media' ، (Media || 'all')) ؛
linktag.setattribute ('type' ، 'text/css') ؛
linktag.href = cssurl ؛
Head.AppendChild (Linktag) ؛
}
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.