แม้ว่าประวัติศาสตร์ของ JavaScript ในการใช้บล็อกโค้ดที่ยาวและน่าเบื่อเพื่อกำหนดเป้าหมายเบราว์เซอร์เฉพาะจะสิ้นสุดลงแล้ว แต่ก็ยังจำเป็นต้องใช้บล็อกโค้ดง่ายๆ และการตรวจจับอ็อบเจ็กต์เป็นครั้งคราวเพื่อให้แน่ใจว่าโค้ดบางตัวทำงานอย่างถูกต้องบนเครื่องของผู้ใช้
ในบทความนี้ ฉันจะสรุป 7 วิธีที่ไวยากรณ์ JavaScript แตกต่างกันระหว่าง Internet Explorer และ Firefox
1. คุณสมบัติ CSS “ลอย”
ไวยากรณ์พื้นฐานในการรับคุณสมบัติ CSS เฉพาะของออบเจ็กต์ที่กำหนดคือคุณสมบัติ object.style และคุณสมบัติที่มีการใส่ยัติภังค์จะใช้สัญลักษณ์แบบอูฐแทน ตัวอย่างเช่น หากต้องการรับแอตทริบิวต์สีพื้นหลังของ div ที่มีรหัส "ส่วนหัว" เราจำเป็นต้องใช้ไวยากรณ์ต่อไปนี้:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
แต่เนื่องจาก "float" เป็นคำสงวนใน JavaScript เราจึงไม่สามารถใช้ object.style.float เพื่อรับแอตทริบิวต์ "float" ได้ นี่คือวิธีที่เราใช้ในเบราว์เซอร์ทั้งสอง:
ไวยากรณ์ของ IE:
document.getElementById("ส่วนหัว").style.styleFloat = "ซ้าย";
ไวยากรณ์ของไฟร์ฟอกซ์:
document.getElementById("ส่วนหัว").style.cssFloat = "ซ้าย";
2. รูปแบบการคำนวณขององค์ประกอบ
ด้วยการใช้ object.style.property ข้างต้น JavaScript สามารถรับและแก้ไขสไตล์ CSS ที่ตั้งไว้ของอ็อบเจ็กต์ได้อย่างง่ายดาย แต่ข้อจำกัดของไวยากรณ์นี้คือสามารถรับสไตล์อินไลน์ใน HTML เท่านั้น หรือสไตล์ที่ตั้งค่าโดยตรงโดยใช้ JavaScript อ็อบเจ็กต์สไตล์ไม่สามารถรับสไตล์ที่ตั้งค่าโดยใช้สไตล์ชีตภายนอก เพื่อให้ได้ "รูปแบบจากการคำนวณ" ของวัตถุ เราใช้รหัสต่อไปนี้:
ไวยากรณ์ของ IE:
var myObject = document.getElementById("ส่วนหัว");
var myStyle = myObject.currentStyle.พื้นหลังสี;
ไวยากรณ์ของไฟร์ฟอกซ์:
var myObject = document.getElementById("ส่วนหัว");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.พื้นหลังสี;
3. รับแอตทริบิวต์ "class" ขององค์ประกอบ
คล้ายกับกรณีของแอตทริบิวต์ "float" เบราว์เซอร์ทั้งสองใช้วิธีการ JavaScript ที่แตกต่างกันเพื่อรับคุณลักษณะนี้
ไวยากรณ์ของ IE:
var myObject = document.getElementById("ส่วนหัว");
var myAttribute = myObject.getAttribute("ชื่อคลาส");
ไวยากรณ์ของไฟร์ฟอกซ์:
var myObject = document.getElementById("ส่วนหัว");
var myAttribute = myObject.getAttribute("คลาส");
4. การได้รับแอตทริบิวต์ "สำหรับ" ของป้ายกำกับ
จะเหมือนกับ 3. การใช้ JavaScript เพื่อรับแอตทริบิวต์ "สำหรับ" ของป้ายกำกับก็มีไวยากรณ์ที่แตกต่างกันเช่นกัน
ไวยากรณ์ 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 ดังนั้นจึงมีปัญหาบางประการกับวิธีนี้ บ่อยครั้งที่ความแตกต่างนี้สามารถชดเชยได้โดยการได้รับ "ตำแหน่งการเลื่อน" - แต่นั่นเป็นหัวข้อสำหรับบทความอื่น