ในระหว่างกระบวนการพัฒนาเรามักจะพบรูปแบบขององค์ประกอบ DOM ผ่าน JS มีหลายวิธีเช่น: โดยการเปลี่ยนคลาสขององค์ประกอบ DOM ตอนนี้เราพูดคุยเกี่ยวกับ JS ดั้งเดิมเพื่อรับรูปแบบ CSS ขององค์ประกอบ DOM โปรดทราบว่าไม่ใช่การตั้งค่า
ก่อนที่จะเริ่มต้นให้พูดคุยกันก่อนเกี่ยวกับการได้รับวัตถุแอตทริบิวต์ CSS ทั้งหมดที่ใช้กับองค์ประกอบในที่สุด หากไม่มีการตั้งค่าสไตล์เป็นองค์ประกอบสไตล์เริ่มต้นของเบราว์เซอร์จะถูกส่งคืน
1.ele.style
เมื่อเรียนรู้ DOM ฉันเห็นว่าค่าสไตล์องค์ประกอบนั้นได้มาจาก Ele.style แต่บางครั้งสิ่งที่ฉันได้รับไม่ใช่ค่าสไตล์ของโหนด แต่เป็นค่าที่ว่างเปล่า นี่เป็นเพราะ ele.style สามารถรับค่าสไตล์ที่เขียนในแอตทริบิวต์สไตล์ในแท็กองค์ประกอบเท่านั้นและไม่สามารถรับแอตทริบิวต์สไตล์ที่กำหนดไว้ใน <style> </style> และโหลดผ่าน <link href = "css.css">
ตัวอย่าง:
test var = document.getElementById ("ทดสอบ"); // รับการทดสอบสี style.color ของโหนด;2. GetComputedStyle ()
GetComputedStyle เป็นค่าแอตทริบิวต์ CSS ที่สามารถรับค่าแอตทริบิวต์ CSS ที่ใช้แล้วทั้งหมดขององค์ประกอบปัจจุบัน
ไวยากรณ์มีดังนี้:
window.getComputedStyle ("องค์ประกอบ", "pseudo-class");วิธีนี้ยอมรับพารามิเตอร์สองพารามิเตอร์: เพื่อให้ได้องค์ประกอบของสไตล์ที่คำนวณและสตริงเทียม-องค์ประกอบ (เช่น ": ก่อน") หากไม่จำเป็นต้องใช้ข้อมูลองค์ประกอบหลอกพารามิเตอร์ที่สองอาจเป็นโมฆะ นอกจากนี้ยังสามารถใช้งานผ่าน document.defaultView.getComputedStyle ("องค์ประกอบ", "pseudo-class");
ตัวอย่าง:
var test = document.getElementById ("ทดสอบ"), demo = window.getComputedStyle (ทดสอบ, null); // รับ Demo.color สีของโหนดหมายเหตุ: Firefox และ Safari จะแปลงสีเป็นรูปแบบ RGB หากไม่มีสไตล์บนโหนดทดสอบให้ใช้ Style.length เพื่อดูจำนวนสไตล์เริ่มต้นของเบราว์เซอร์ IE6-8 ไม่รองรับวิธีนี้ต้องใช้วิธีการต่อไปนี้
3. Ele.currentstyle
CurrentStyle เป็นคุณลักษณะของเบราว์เซอร์ IE เอง ไวยากรณ์ของมันคล้ายกับ ele.style ความแตกต่างคือ element.currentstyle ส่งคืนค่าแอตทริบิวต์ CSS สุดท้ายขององค์ประกอบที่ใช้ในปัจจุบัน (รวมถึงไฟล์ลิงค์ภายนอก CSS, แอตทริบิวต์ <style> ที่ฝังอยู่ในหน้า ฯลฯ )
ไวยากรณ์:
var style = dom.currentstyle;
ตัวอย่าง:
var test = document.getElementById ("ทดสอบ"), demo = test.currentstyle; // รับการสาธิตสีสีของโหนด;หมายเหตุ: สำหรับเส้นขอบแอตทริบิวต์ที่ครอบคลุม ฯลฯ เช่นส่งคืนที่ไม่ได้กำหนด เบราว์เซอร์อื่น ๆ กลับมาค่าคืนและบางตัวไม่กลับมา แต่คุณลักษณะเช่นค่าคืนค่า BorderleftWidth
4. GetPropertyValue ()
GetPropertyValue ได้รับชื่อคุณสมบัติโดยตรงของสไตล์ CSS
ไวยากรณ์มีดังนี้:
window.getComputedStyle (องค์ประกอบ, null) .getPropertyValue (คุณสมบัติ)
ตัวอย่าง:
var test = document.getElementById ('ทดสอบ'); window.getComputedStyle (ทดสอบ, null) .getPropertyValue ("พื้นหลังสี");หมายเหตุ: ชื่อแอตทริบิวต์ไม่รองรับรูปแบบอูฐ IE6-8 ไม่รองรับวิธีนี้ดังนั้นจึงจำเป็นต้องใช้วิธีการต่อไปนี้
5. GetAttribute
GetAttribute นั้นคล้ายคลึงกับ GetPropertyValue ความแตกต่างอย่างหนึ่งคือรูปแบบอูฐของชื่อคุณสมบัติ
ตัวอย่าง:
var test = document.getElementById ('ทดสอบ'); window.getComputedStyle (ทดสอบ, null) .getPropertyValue ("BackgroundColor");หมายเหตุ : วิธีนี้รองรับ IE6-8 เท่านั้น
สรุป:
วิธี jQuery CSS () การดำเนินการพื้นฐานใช้วิธีการ getComputedStyle และ getPropertyValue เมื่อเราใช้การพัฒนา JS ดั้งเดิมเราสามารถรับค่าขององค์ประกอบผ่านวิธีการข้างต้น
ต่อไปนี้เป็นวิธีที่เข้ากันได้กับ IE, Firefox, Chrome และเบราว์เซอร์อื่น ๆ เพื่อให้ได้รูปแบบองค์ประกอบซึ่งสามารถนำไปใช้กับโครงการ
ฟังก์ชั่น getStyle (ele) {var style = null; if (window.getComputedStyle) {style = window.getComputedStyle (ele, null); } else {style = ele.currentstyle; } return style;}วิธีง่ายๆข้างต้นในการรับรูปแบบองค์ประกอบใน JS ดั้งเดิมคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น