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