วิธี JavaScript เพื่อรับค่าแอตทริบิวต์ CSS: GetComputedStyle และ CurrentStyle
1. สำหรับสไตล์ CSS แบบอินไลน์ขององค์ประกอบ (<div style = "color:#369"> สวัสดี </div>) คุณสามารถใช้ Element.style.color โดยตรงเพื่อรับค่าของแอตทริบิวต์ CSS โดยตรง
2. อย่างไรก็ตามมันเป็นไปไม่ได้ที่จะได้รับสไตล์ CSS ที่กำหนดไว้ภายนอก ยิ่งไปกว่านั้นวิธีการที่เบราว์เซอร์ IE ใช้แตกต่างจากเบราว์เซอร์มาตรฐานอื่น ๆ (Firefox, Chrome, Opera, Safari) IE เบราว์เซอร์ใช้ Element.currentstyle และ W3C Standard Browser ใช้ getComputedStyle เพื่อรับ
1. IE ได้รับค่าแอตทริบิวต์ CSS ที่กำหนดไว้ภายนอกในองค์ประกอบ: element.currentstyle
วัตถุ CurrentStyle ส่งคืนสไตล์ชีทบนองค์ประกอบ แต่วัตถุสไตล์จะส่งคืนสไตล์การฝังที่ใช้กับองค์ประกอบผ่านแอตทริบิวต์แท็กสไตล์เท่านั้น
ดังนั้นค่าสไตล์ที่ได้รับผ่านวัตถุ CurrentStyle อาจแตกต่างจากค่าสไตล์ที่ได้รับผ่านวัตถุสไตล์
ตัวอย่างเช่นหากค่าคุณสมบัติสีของวรรคถูกตั้งค่าเป็นสีแดง (สีแดง) ผ่านลิงก์หรือฝังสไตล์ชีทแทนการฝังตัววัตถุ. currentstyle.color จะคืนสีที่ถูกต้องและรูปแบบวัตถุสีไม่สามารถคืนค่าได้ อย่างไรก็ตามหากผู้ใช้ระบุ <p style = "color: 'red'"> ทั้งวัตถุ CurrentStyle และสไตล์จะส่งคืนค่าสีแดง
วัตถุ CurrentStyle สะท้อนให้เห็นถึงลำดับความสำคัญของสไตล์ในแผ่นสไตล์ ใน HTML คำสั่งนี้คือ:
1) สไตล์อินไลน์
2) กฎสไตล์ชีท
3) แอตทริบิวต์แท็ก HTML
4) คำจำกัดความภายในของแท็ก HTML
2. W3C ได้รับค่าแอตทริบิวต์ CSS ที่กำหนดไว้ภายนอก: window.getComputedStyle (องค์ประกอบ, pseudoelt)
องค์ประกอบที่ต้องการ, องค์ประกอบ HTML
Pseudoelt เป็นสิ่งจำเป็นเพื่อให้ได้รูปแบบระดับหลอกขององค์ประกอบ
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getStyle (โหนด, คุณสมบัติ) {
if (node.style [คุณสมบัติ]) {
ส่งคืน node.style [คุณสมบัติ];
-
อื่นถ้า (node.currentstyle) {
ส่งคืน node.currentstyle [คุณสมบัติ];
-
อื่นถ้า (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle (โหนด, null);
return style.getPropertyValue (ทรัพย์สิน);
-
คืนค่า null;
-