วิธีง่าย ๆ ในการรับรูปแบบองค์ประกอบใน JS พื้นเมือง

ในระหว่างกระบวนการพัฒนาเรามักจะพบรูปแบบขององค์ประกอบ 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 มากขึ้น