มาพูดถึงการเพิ่มกฎสไตล์แบบไดนามิกอีกครั้ง

ฉันเคยให้ฟังก์ชันที่มีประโยชน์ในบล็อกโพสต์เดียว และมีการใช้กันอย่างแพร่หลายในบล็อกโพสต์ของฉันหลายรายการ ฉันอ่านมามากเมื่อเร็วๆ นี้ ดังนั้นฉันจึงเขียนบล็อกโพสต์นี้เพื่อแยกแยะสิ่งใหม่ๆ ที่ฉันได้เรียนรู้

ไม่ต้องสงสัยเลยว่าตามหลักการของการแยกประสิทธิภาพและโครงสร้าง การนำเข้าสไตล์ชีตใหม่โดยตรงเป็นตัวเลือกที่ดีที่สุด แต่ในบางกรณี มันจะไม่ทำงาน ตัวอย่างเช่น หากเราสร้าง DIV แบบลากได้ จากมุมมองของ การตั้งค่าสไตล์คือ ตำแหน่งอย่างแน่นอน เพื่อป้องกันไม่ให้ส่งผลกระทบต่อการไหลของเอกสารต้นฉบับ จากนั้นเปลี่ยนค่าด้านบนและซ้ายทีละน้อยเพื่อให้ได้เอฟเฟกต์ของการเคลื่อนไหว เนื่องจากการลากมีแนวคิดเรื่องเวลา 24 เฟรมต่อวินาที จึงเป็นไปไม่ได้ที่จะรวมทุกอย่างไว้ในสไตล์ชีต ดังนั้นจึงจำเป็นอย่างยิ่งที่จะต้องสร้างกฎสไตล์แบบไดนามิกและแก้ไขกฎสไตล์อย่างรวดเร็ว W3C ได้ทำงานหลายอย่างเพื่อสิ่งนี้ ใน DOM2.0 อินเทอร์เฟซจำนวนมากได้รับการขยาย

หากต้องการย้อนกลับไป การแยกประสิทธิภาพและโครงสร้างไม่ได้จำกัดอยู่เพียงการนำเข้าสไตล์ชีตเท่านั้น คุณรู้ไหมว่ามีสไตล์สามประเภท ได้แก่ สไตล์ภายนอก สไตล์ภายใน และสไตล์อินไลน์

• สไตล์ภายนอกที่เรากล่าวถึงข้างต้นเขียนในไฟล์ CSS แยกต่างหาก
• สไตล์ภายในถูกเขียนอย่างอิสระในแท็กสไตล์ โดยปกติจะวางไว้ในแท็กส่วนหัว สไตล์ที่สร้างโดยฟังก์ชันที่ฉันให้ไว้สุดท้ายคือสไตล์ภายใน
• สไตล์อินไลน์คือสไตล์ที่เขียนในแอตทริบิวต์ style ขององค์ประกอบ

อินเทอร์เฟซที่เพิ่มใหม่ส่วนใหญ่จะเน้นไปที่สไตล์ภายนอก - ฉันพูดว่าอินเทอร์เฟซเพราะเบราว์เซอร์มีการใช้งานที่เกี่ยวข้อง พวกหยิ่งเช่น IE6 ไม่เคยละเลยการมีอยู่ของพวกเขา

ในโมเดล W3C แท็กลิงก์และแท็กสไตล์ประเภท "text/css" เป็นตัวแทนของออบเจ็กต์ CSSStyleSheet เราสามารถรับออบเจ็กต์ CSSStyleSheet ทั้งหมดในหน้าปัจจุบันผ่าน document.styleSheets แต่นี่เป็นคอลเล็กชัน ไม่ใช่เรื่องง่าย อาร์เรย์ แต่ละวัตถุ CSSStyleSheet มีคุณสมบัติดังต่อไปนี้

• ประเภท: ส่งคืนสตริง "text/css" เสมอ
• ปิดการใช้งาน: มันมีผลเช่นเดียวกับการปิดการใช้งานของอินพุต และค่าเริ่มต้นคือเท็จ
• href: ส่งกลับ URL หากเป็นแท็กสไตล์ จะเป็นโมฆะ
• title: ส่งกลับค่าของชื่อ ชื่อจะเหมือนกับชื่อขององค์ประกอบทั่วไป คุณสามารถเขียนอะไรก็ได้ที่คุณต้องการ
• สื่อ: สิ่งที่ส่งคืนโดย IE และ Firefox นั้นไม่สอดคล้องกัน ดังนั้นจึงยากที่จะพูด สื่อใช้เพื่อระบุว่ากฎสไตล์ที่เป็นเจ้าของนั้นใช้ได้กับอุปกรณ์ใด ค่าเริ่มต้นคือทั้งหมด
• OwnerRule: ส่งคืนออบเจ็กต์ CSSRule แบบอ่านอย่างเดียวหากมีการแนะนำสไตล์ชีตด้วย @import
• cssRules: ส่งกลับคอลเลกชันของวัตถุกฎสไตล์แบบอ่านอย่างเดียว (วัตถุ CSSStyleRule)

วัตถุกฎสไตล์ (วัตถุ CSSStyleRule) ได้รับการพัฒนาโดย W3C เพื่อกำหนดสไตล์ในรายละเอียดเพิ่มเติม ตัวอย่างเช่น สิ่งต่อไปนี้สอดคล้องกับวัตถุกฎสไตล์:

ปุ่ม [ประเภท] {
การขยาย:4px 10px 4px 7px;
ความสูงของบรรทัด:17px;
-

วัตถุกฎสไตล์มีแอตทริบิวต์หลักดังต่อไปนี้: type, cssText, parentStyleSheet, parentRule

Type ค่อนข้างคล้ายกับ nodeType ซึ่งแบ่งย่อยกฎสไตล์ โดยจะใช้จำนวนเต็มเพื่อแสดงประเภท สถานการณ์เฉพาะมีดังนี้

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (กำหนดวัตถุ CSSStyleRule)
• 2: CSSRule.CHARSET_RULE (กำหนดวัตถุ CSSCharsetRule ใช้ในการตั้งค่าชุดอักขระของสไตล์ชีตปัจจุบัน ค่าเริ่มต้นจะเหมือนกับหน้าเว็บปัจจุบัน)
• 3: CSSRule.IMPORT_RULE (กำหนดวัตถุ CSSImportRule ซึ่งใช้ @import เพื่อแนะนำสไตล์ชีตอื่นๆ)
• 4: CSSRule.MEDIA_RULE (กำหนดวัตถุ CSSMediaRule ใช้เพื่อตั้งค่าว่าจะใช้สไตล์นี้กับจอภาพ เครื่องพิมพ์ โปรเจ็กเตอร์ ฯลฯ)
• 5: CSSRule.FONT_FACE_RULE (กำหนดวัตถุ CSSFontFaceRule, @font-face ของ CSS3)
• 6: CSSRule.PAGE_RULE (กำหนดวัตถุ CSSPageRule)

จำเป็นต้องพูด cssText เป็นแอตทริบิวต์ที่มีประโยชน์มากที่จะแปลงสตริงให้เป็นกฎสไตล์โดยตรง โดยไม่สนใจความแตกต่างในแอตทริบิวต์สไตล์ของแต่ละเบราว์เซอร์ เช่น cssFloat และ styleFloat

parentStyleSheet และ parentRule เป็นทั้ง @import อย่างไรก็ตาม @import มีปัญหาภายใต้ IE ดังนั้นโดยพื้นฐานแล้วฉันจะไม่ใช้มัน