في الآونة الأخيرة ، كنت أعمل في مشروع وأحتاج إلى JavaScript لإدراج الأنماط ديناميكيًا ، لكن الطريقة السابقة فشلت! السبب الذي قمت بتسجيله لمدة ساعتين هو أنني كنت شخصًا عاهرة. دعونا نتحدث عن هذا في النهاية!
يستخدم نمط إدخال JavaScript على نطاق واسع في التطوير الأمامي ، وخاصة عند تعديل الأداء الأمامي وخلع الصفحة. المهمة التي قمت بها مؤخرًا هي أن المستخدم ينقر على زر على موقع آخر وإدراج برنامج نصي تحت صفحة موقع أخرى لتنفيذه ، والذي يتضمن إدخال النمط.
بشكل عام ، هناك نوعان من أنماط الإدراج الديناميكي لجافا سكريبت. أحدهما هو تقديم أنماط خارجية في الصفحة ، واستخدم علامة <ink> في <head> لتقديم ملف نمط خارجي ، والآخر هو استخدام علامة <style> لإدراج نمط الصفحة في الصفحة (تلك المذكورة هنا ليست سمة النمط).
1. إدخال الأنماط الخارجية في الصفحة:
باستخدام علامة <ink> في <head> لتقديم ملف نمط خارجي ، هذا بسيط نسبيًا ، ولا توجد مشكلات توافق لكل متصفح رئيسي:
نسخة الكود كما يلي:
وظيفة includeLinkStyle (url) {
var link = document.createElement ("link") ؛
link.rel = "stylesheet" ؛
link.type = "text/css" ؛
link.href = url ؛
document.getElementsByTagName ("Head") [0] .AppendChild (Link) ؛
}
includeLinkStyle ("http://css.vevb.com/home/css/reset.css؟v=20101227") ؛
ومع ذلك ، في المشروع الذي أقوم به حاليًا ، هناك عدد قليل جدًا من الأنماط التي يتم تطبيقها بمفرده ، ويبدو أنه من غير المناسب تقديم ملف نمط خارجي مباشرة ، لذلك اخترت الحل الثاني ، باستخدام علامة <Style> لإدراج نمط الصفحة في الصفحة.
2. استخدم علامة <Style> لإدراج نمط الصفحة:
هذه الطريقة لديها مشاكل التوافق في مختلف المتصفحات السائدة. لا يمكن للمتصفحات القياسية مثل Firefox الحصول مباشرة على قيمة CSStext لورقة الأنماط. في المتصفحات القياسية ، يمكنهم فقط استخدام Document.styleshepheres [0] .CSSRULES [0] .CSSTEXT للحصول على الأنماط بشكل فردي ؛ في الوقت نفسه ، استخدم: document.stylesheets [0] .CSSRules [0] .csStext = NewCsStext ؛ لن تقوم الصفحة بتحديث النمط تلقائيًا ، ويجب استخدامها: document.stylesheets [0] .CSSRULES [0] لا يبدو أن هذا إنساني وبسيط للاستخدام. يتم استخدام طريقة جيدة في yui: style.appendchild (document.createTextNode (أنماط)) ؛ استخدم CreateTextNode لإضافة سلاسل النمط إلى علامة <style> ؛
نسخة الكود كما يلي:
وظيفة includeSeleElement (الأنماط ، styleid) {
if (document.getElementById (styleid)) {
يعود
}
var style = document.createElement ("style") ؛
style.id = styleid ؛
// من الأفضل تعيين الخصائص التالية لـ IE هنا
/*if (isie ()) {
style.type = "text/css" ؛
style.media = "الشاشة"
}*/
(document.getElementsByTagName ("Head") [0] || document.body) .AppendChild (style) ؛
if (style.stylesheet) {// for ie
style.stylesheet.csstext = أنماط ؛
} آخر {// لـ W3C
style.appendchild (document.createTextNode (styles)) ؛
}
}
var styles = "#div {background-color:#ff3300 ؛ color: #fffff}" ؛
includeSteleElement (الأنماط ، "Newstyle") ؛
وبهذه الطريقة ، يمكن تطبيق العناصر الموجودة في الصفحة مباشرة على النمط ، بغض النظر عما إذا كان يتم إلحاق عناصرك من خلال البرنامج النصي.
حول اليد السخيفة:
انظر إلى هذا الرمز:
نسخة الكود كما يلي:
var divobj = document.createElement ("div") ؛
divobj.id = "__div" ؛
divobj.innerhtml = "Test JS Insert Dom and Style" ؛
document.body.appendchild (divobj) ؛
var styles = "#__ div {background-color:#ff3300 ؛ color: #fffff}" ؛
includeSteleElement (الأنماط ، "Newstyle") ؛
كما ذكرنا سابقًا ، يكون هذا المشروع هو عندما ينقر المستخدم على زر على موقع آخر ويدرج برنامج نصي تحت صفحة موقع أخرى لتنفيذها. وهذا يشمل الإدراج النمط. من أجل ضمان تفرد معرف العنصر الذي أنشأته قدر الإمكان ، أضفت "__" أمام معرف العنصر للإشارة إلى أن الحماية الخاصة ضد النزاعات. نتيجة لذلك ، كانت المأساة تسبب. لا يمكن أن تبدأ تسمية IE6 و IE7 و ID مع السطح السفلي ("_") ، وقد نسيت هذا بالفعل! استغرق الأمر ساعتين لمعرفة السبب. إنها مأساة! اتخاذ استنتاج! لا تكون رخيصًا عند القيام بالواجهة الأمامية!