ในบทความนี้ ผมจะสรุปแง่มุมต่างๆ ของไวยากรณ์ JavaScript ที่แตกต่างกันระหว่าง Internet Explorer และ Firefox
1. คุณสมบัติ CSS “ลอย”
ไวยากรณ์พื้นฐานในการรับคุณสมบัติ CSS เฉพาะของออบเจ็กต์ที่กำหนดคือคุณสมบัติ object.style และคุณสมบัติที่มีการใส่ยัติภังค์จะใช้สัญลักษณ์แบบอูฐแทน ตัวอย่างเช่น หากต้องการรับแอตทริบิวต์สีพื้นหลังของ div ที่มี ID "header" เราจำเป็นต้องใช้ไวยากรณ์ต่อไปนี้:
document.getElementById
("header").style.borderBottom= "1px solid #ccc";
"float" เป็นคำสงวนของ JavaScript เราไม่สามารถใช้ object.style.float เพื่อรับแอตทริบิวต์ "float" นี่คือวิธีที่เราใช้ในเบราว์เซอร์ทั้งสอง:
ไวยากรณ์ของ IE:
document.getElementById("header").style.styleFloat = "left"
;
document.getElementById("header").style.cssFloat = "left";
2. รูปแบบขององค์ประกอบที่คำนวณ
ด้วยการใช้ object.style.property ข้างต้น JavaScript สามารถรับและแก้ไขสไตล์ CSS ที่ตั้งไว้ของอ็อบเจ็กต์ได้อย่างง่ายดาย แต่ข้อจำกัดของไวยากรณ์นี้คือสามารถรับสไตล์อินไลน์ใน HTML เท่านั้น หรือสไตล์ที่ตั้งค่าโดยตรงโดยใช้ JavaScript อ็อบเจ็กต์สไตล์ไม่สามารถรับสไตล์ที่ตั้งค่าโดยใช้สไตล์ชีตภายนอก เพื่อให้ได้ "รูปแบบจากการคำนวณ" ของวัตถุ เราใช้รหัสต่อไปนี้:
ไวยากรณ์ของ IE:
var myObject = document.getElementById("ส่วนหัว");
var myStyle = myObject.currentStyle.
สี ไวยากรณ์ของ Firefox:
var myObject = document.getElementById("ส่วนหัว");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.BackColor;
3. รับแอตทริบิวต์ "class" ขององค์ประกอบ
คล้ายกับกรณีของแอตทริบิวต์ "float" เบราว์เซอร์ทั้งสองใช้วิธีการ JavaScript ที่แตกต่างกันเพื่อรับคุณลักษณะนี้
ไวยากรณ์ของ IE:
var myObject = document.getElementById("ส่วนหัว");
var myAttribute = myObject.getAttribute("className");
ไวยากรณ์ของ Firefox:
var myObject = document.getElementById("ส่วนหัว");
var myAttribute = myObject.getAttribute("class");
4. รับแอตทริบิวต์ "สำหรับ" ของป้ายกำกับ
เช่นเดียวกับ 3 ยังมีไวยากรณ์ที่แตกต่างกันสำหรับการใช้ JavaScript เพื่อรับแอตทริบิวต์ "for" ของป้ายกำกับ
ไวยากรณ์ของ IE:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
ไวยากรณ์ของ Firefox:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
ไวยากรณ์เดียวกันนี้ใช้สำหรับเมธอด setAtrribute
5. รับตำแหน่งเคอร์เซอร์
การได้รับตำแหน่งเคอร์เซอร์ขององค์ประกอบนั้นเกิดขึ้นได้ยาก และหากคุณต้องการทำเช่นนั้น ไวยากรณ์จะแตกต่างออกไปใน IE และ Firefox โค้ดตัวอย่างนี้ค่อนข้างพื้นฐาน และโดยทั่วไปจะใช้เป็นส่วนหนึ่งของตัวจัดการเหตุการณ์ที่ซับซ้อนจำนวนมาก และใช้เพื่ออธิบายความแตกต่างเท่านั้น ควรสังเกตว่าผลลัพธ์ใน IE แตกต่างจากใน Firefox ดังนั้นจึงมีปัญหาบางประการกับวิธีนี้ บ่อยครั้งที่ความแตกต่างนี้สามารถชดเชยได้โดยการได้รับ "ตำแหน่งการเลื่อน" - แต่นั่นเป็นหัวข้อสำหรับบทความอื่น
ไวยากรณ์ของ IE:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
ไวยากรณ์ของ Firefox:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;