เมื่อเร็ว ๆ นี้ฉันกำลังทำงานในโครงการและต้องการจาวาสคริปต์เพื่อแทรกสไตล์แบบไดนามิก แต่วิธีก่อนหน้านี้ล้มเหลว! เหตุผลที่ฉันตรวจสอบเป็นเวลา 2 ชั่วโมงก็คือฉันเป็นคนเท่ มาพูดถึงเรื่องนี้ในตอนท้าย!
สไตล์การแทรก JavaScript ถูกนำมาใช้กันอย่างแพร่หลายในการพัฒนาส่วนหน้าโดยเฉพาะอย่างยิ่งเมื่อปรับเปลี่ยนประสิทธิภาพส่วนหน้าและสกินเพจ งานที่ฉันทำเมื่อเร็ว ๆ นี้คือผู้ใช้คลิกปุ่มบนเว็บไซต์อื่นและแทรกสคริปต์ใต้หน้าไซต์อื่นเพื่อดำเนินการซึ่งรวมถึงการแทรกสไตล์
โดยทั่วไปการพูดมีรูปแบบการแทรกแบบไดนามิกสองประเภทสำหรับ JavaScript หนึ่งคือการแนะนำรูปแบบภายนอกลงในหน้าใช้แท็ก <link> ใน <head> เพื่อแนะนำไฟล์สไตล์ภายนอกและอื่น ๆ คือการใช้แท็ก <style> เพื่อแทรกสไตล์หน้าในหน้า (อันที่กล่าวถึงที่นี่ไม่ใช่แอตทริบิวต์สไตล์)
1. แนะนำสไตล์ภายนอกลงในหน้า:
การใช้แท็ก <link> ใน <head> เพื่อแนะนำไฟล์สไตล์ภายนอกนี่ค่อนข้างง่ายและไม่มีปัญหาความเข้ากันได้สำหรับแต่ละเบราว์เซอร์กระแสหลัก:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นรวมถึงการเชื่อมโยง Style (URL) {
var link = document.createElement ("ลิงก์");
link.rel = "Stylesheet";
link.type = "text/css";
link.href = url;
document.getElementByTagname ("head") [0] .AppendChild (ลิงก์);
-
IncludeLinkstyle ("http://css.vevb.com/home/css/reset.css?v=20101227");
อย่างไรก็ตามในโครงการที่ฉันกำลังทำอยู่มีสไตล์น้อยมากที่ใช้ด้วยตัวเองและดูเหมือนว่าไม่เหมาะสมที่จะแนะนำไฟล์สไตล์ภายนอกโดยตรงดังนั้นฉันจึงเลือกวิธีแก้ปัญหาที่สองโดยใช้แท็ก <style> เพื่อแทรกสไตล์หน้าในหน้า
2. ใช้แท็ก <style> เพื่อแทรกสไตล์หน้า:
วิธีนี้มีปัญหาความเข้ากันได้ในเบราว์เซอร์กระแสหลักต่างๆ เบราว์เซอร์มาตรฐานเช่น Firefox ไม่สามารถรับค่า CSSTEXT ของสไตล์ชีทได้โดยตรง ในเบราว์เซอร์มาตรฐานพวกเขาสามารถใช้ document.stylesheets [0] .cssrules [0] .csstext เพื่อให้ได้สไตล์ทีละ ในขณะเดียวกันก็ใช้: document.stylesheets [0] .cssrules [0] .csstext = newCsstext; หน้าจะไม่อัปเดตสไตล์โดยอัตโนมัติและคุณต้องใช้: document.stylesheets [0] .cssrules [0] .style.csstext = newcsstext; สิ่งนี้ดูเหมือนจะไม่เป็นมนุษย์และใช้งานง่าย วิธีการที่ดีใช้ใน yui: style.appendchild (document.createtextNode (สไตล์)); ใช้ createTextNode เพื่อเพิ่มสตริงสไตล์ลงในแท็ก <style>;
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นรวมถึงสไตล์การเรียนรู้ (สไตล์, styeid) {
if (document.getElementById (StyleId)) {
กลับ
-
var style = document.createElement ("Style");
style.id = styeid;
// เป็นการดีที่สุดที่จะตั้งค่าคุณสมบัติต่อไปนี้สำหรับ IE ที่นี่
/*ถ้า (isie ()) {
style.type = "text/css";
style.media = "หน้าจอ"
-
(document.getElementsByTagname ("head") [0] || document.body) .appendchild (สไตล์);
if (style.stylesheet) {// สำหรับ IE
style.stylesheet.csstext = Styles;
} else {// สำหรับ w3c
style.appendchild (document.createTextNode (สไตล์));
-
-
var styles = "#div {พื้นหลังสี:#ff3300; สี: #fffff}";
Includestyleletelement (สไตล์ "Newstyle");
ด้วยวิธีนี้องค์ประกอบในหน้าสามารถนำไปใช้โดยตรงกับสไตล์ไม่ว่าองค์ประกอบของคุณจะถูกผนวกเข้ากับสคริปต์หรือไม่
เกี่ยวกับมือโง่:
ดูรหัสนี้:
การคัดลอกรหัสมีดังนี้:
var divobj = document.createelement ("div");
divobj.id = "__div";
divobj.innerhtml = "ทดสอบ js แทรก dom และสไตล์";
document.body.appendchild (divobj);
var styles = "#__ div {พื้นหลังสี:#ff3300; สี: #fffff}";
Includestyleletelement (สไตล์ "Newstyle");
ดังที่ได้กล่าวไว้ก่อนหน้านี้โครงการนี้คือเมื่อผู้ใช้คลิกปุ่มบนเว็บไซต์อื่นและแทรกสคริปต์ใต้หน้าไซต์อื่นเพื่อดำเนินการ ซึ่งรวมถึงการแทรกสไตล์ เพื่อให้แน่ใจว่าเป็นเอกลักษณ์ของ ID องค์ประกอบที่ฉันสร้างให้มากที่สุดเท่าที่จะเป็นไปได้ฉันได้เพิ่ม "__" ไว้ด้านหน้าของ ID องค์ประกอบเพื่อระบุว่าการป้องกันส่วนตัวจากความขัดแย้ง เป็นผลให้เกิดโศกนาฏกรรม การตั้งชื่อของ IE6, IE7 คลาสและ ID ไม่สามารถเริ่มต้นด้วยขีดล่าง ("_") และฉันลืมสิ่งนี้จริง ๆ ! ใช้เวลาสองชั่วโมงในการหาเหตุผล มันเป็นโศกนาฏกรรม! วาดข้อสรุป! อย่าราคาถูกเมื่อทำส่วนหน้า!