สรุป:
ในระหว่างกระบวนการพัฒนาเรามักจะพบรูปแบบขององค์ประกอบ 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 ("ทดสอบ");
// รับสีของโหนด
test.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;
// รับสีของโหนด
Demo.Color;
หมายเหตุ: สำหรับเส้นขอบแอตทริบิวต์ที่ครอบคลุม ฯลฯ เช่นส่งคืนที่ไม่ได้กำหนด เบราว์เซอร์อื่น ๆ กลับมาค่าคืนและบางตัวไม่กลับมา แต่คุณลักษณะเช่นค่าคืนค่า 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);
}อื่น{
style = ele.currentstyle;
-
สไตล์การกลับมา;
-