โดยทั่วไปมีสองวิธีที่ JavaScript เข้าถึงคุณสมบัติ CSS: "เข้าถึงองค์ประกอบ" และ "เข้าถึงโดยตรงบนแผ่นสไตล์" นอกจากนี้ยังมีปัญหาที่ไม่สามารถเพิกเฉยได้เมื่อเข้าถึงสไตล์ - สไตล์รันไทม์
1. การเข้าถึงผ่านองค์ประกอบ
เนื่องจากคุณต้องการเข้าถึงแผ่นสไตล์ผ่านองค์ประกอบคุณควรกำหนดองค์ประกอบที่เป็นก่อน นี่คือเนื้อหาของ DOM ดังนั้นฉันจะไม่พูดเพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่ หลังจากได้รับการอ้างอิงคุณสามารถเข้าถึงแอตทริบิวต์บางอย่างผ่าน "reference.style. แอตทริบิวต์เพื่อเข้าถึง" ตัวอย่างเช่นดูรหัสต่อไปนี้
<pre name = "code"> <pre name = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {ความสูง: 100px; ความกว้าง: 100px; พื้นหลังสี: สีแดง; } </style> </head> <body> <div id = "a"> </div> </body> </html>เมื่อเราต้องการได้สีพื้นหลังของ #A เราสามารถ document.getElementById ("a"). style.backgroundColor; ด้วยวิธีนี้การเข้าถึงจะเสร็จสมบูรณ์ หลังจากนั้นไม่ว่าจะส่งคืนหรือเปลี่ยนค่าแอตทริบิวต์ขึ้นอยู่กับคุณ
2. การเข้าถึงแผ่นสไตล์โดยตรง
โดยทั่วไปการเข้าถึงแผ่นสไตล์โดยตรงคือ "ก่อนอื่นค้นหาบล็อกสไตล์ที่สอดคล้องกันจากนั้นค้นหากฎสไตล์ที่สอดคล้องกันในบล็อกสไตล์และในที่สุดก็พบสไตล์ที่สอดคล้องกันในกฎสไตล์"
มาพูดคุยกันว่าบล็อกสไตล์คืออะไรก่อน ในรหัสรหัส CSS จะมีอยู่ระหว่างแท็ก <style> </stylest> หรือใน <link> และ <style> </style> หรือ <link> เป็นบล็อกสไตล์ ในรหัสอาจมีการจัดเรียงโค้ดหลายบล็อกตามลำดับจากบนลงล่างและเราสามารถเข้าถึงบล็อกสไตล์เช่นเราเข้าถึงองค์ประกอบอาร์เรย์ ตัวอย่างเช่นหากเราต้องการเข้าถึงอันแรกในบล็อกสไตล์เราสามารถจัดทำเอกสารได้สไตล์ชีท [0]
จากนั้นบอกว่ากฎสไตล์คืออะไร ก่อนอื่นดูรหัสต่อไปนี้
<name pre = "code"> <! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {ความสูง: 100px; ความกว้าง: 100px; พื้นหลังสี: สีแดง; } #B {ความสูง: 100px; ความกว้าง: 100px; พื้นหลังสี: สีน้ำเงิน; } </style> </head> <body> <div id = "a"> </div> <div id = "b"> </div> </body> </html>รหัสระบุสไตล์ของ #A และ #B ตามลำดับ คอลเลกชันของสไตล์ของ #A หรือคอลเลกชันของ #B เป็นกฎสไตล์ ในบล็อกสไตล์นี้กฎสไตล์แรกสำหรับ #A และกฎสไตล์ที่สองสำหรับ #B นอกจากนี้เรายังสามารถเข้าถึงกฎสไตล์เช่นเราสามารถเข้าถึงองค์ประกอบอาร์เรย์ ตัวอย่างเช่นหากเราต้องการเข้าถึงกฎสไตล์ #B เราสามารถจัดทำเอกสารได้สไตล์ชีท [0] .cssrules [1] แน่นอนคุณสามารถเลือกที่จะเขียน document.stylesheet [0] .rules [1] เช่นนี้ แต่วิธีการเขียนนี้ไม่ได้รับการสนับสนุนโดย Firefox
จากนั้นเราสามารถเข้าถึงสไตล์ที่เกี่ยวข้อง ตัวอย่างเช่นหากเราต้องการเปลี่ยนสีพื้นหลังของ #B เป็นสีเขียวเราสามารถจัดทำเอกสารสไตล์เฮตส์ [0] .CSSRULES [1]
3. สไตล์รันไทม์
ดูรหัสต่อไปนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <style> #a {ความสูง: 100px; ความกว้าง: 100px; สี: สีแดง; } #B {ความสูง: 100px; ความกว้าง: 100px; } </style> </head> <body> <div id = "a"> <div id = "b"> สังเกตสีตัวอักษร </div> </div> </body> </html>เมื่อเราเรียกใช้การแจ้งเตือน (document.getElementById ("B"). style.color); เราพบว่าไม่มีอะไรถูกส่งออกบนหน้าต่างป๊อปอัพ แต่สีตัวอักษรของหน้าเป็นสีแดงอย่างเห็นได้ชัด ทำไม นี่เป็นเพราะแอตทริบิวต์วัตถุสไตล์ของแต่ละองค์ประกอบจะไม่ได้รับการปรับปรุงทันที เมื่อเราต้องการส่งออกสีแดงบนหน้าต่างป๊อปอัพเราต้องใช้สไตล์รันไทม์ window.getComputedStyle (document.getElementById ("B"), null) .Color เพื่อให้คุณสามารถเข้าถึง "สีแดง" มีอีกวิธีหนึ่งในการเข้าถึงเอกสารสไตล์รันไทม์ getElementById ("b") currentstyle.color แต่วิธีนี้ได้รับการสนับสนุนโดย IE เท่านั้น