แม้ว่าระยะเวลาในประวัติของ JavaScript ในการใช้บล็อกโค้ดที่มีความยาวและน่ารำคาญเพื่อกำหนดเป้าหมายเบราว์เซอร์ที่เฉพาะเจาะจงนั้นสิ้นสุดลง แต่ก็ยังจำเป็นที่จะต้องใช้บล็อกโค้ดและการตรวจจับวัตถุอย่างง่ายเป็นครั้งคราวเพื่อให้แน่ใจว่ารหัสบางอย่างทำงานอย่างถูกต้องบนเครื่องผู้ใช้
ในบทความนี้ฉันจะอธิบายสั้น ๆ ถึง 7 แง่มุมที่แตกต่างกันของไวยากรณ์ JavaScript ระหว่าง Internet Explorer และ Firefox
1. แอตทริบิวต์ CSS“ Float”
ไวยากรณ์พื้นฐานสำหรับการได้รับแอตทริบิวต์ CSS เฉพาะของวัตถุที่กำหนดคือแอตทริบิวต์ ject.style และแอตทริบิวต์ที่มียัติภังค์ควรถูกแทนที่ด้วยระบบการตั้งชื่ออูฐ ตัวอย่างเช่นในการรับคุณสมบัติพื้นหลังสีของ DIV ที่มี ID "ส่วนหัว" เราจำเป็นต้องใช้ไวยากรณ์ต่อไปนี้:
การคัดลอกรหัสมีดังนี้: document.getElementById ("ส่วนหัว"). style.borderBottom = "1px solid #ccc";
อย่างไรก็ตามเนื่องจาก "Float" เป็นคำที่สงวนไว้สำหรับ JavaScript เราจึงไม่สามารถใช้ Object.style.float เพื่อรับแอตทริบิวต์ "Float" นี่คือวิธีที่เราใช้ในสองเบราว์เซอร์:
เช่นไวยากรณ์:
การคัดลอกรหัสมีดังนี้: document.getElementById ("ส่วนหัว"). style.stylefloat = "ซ้าย";
Firefox ไวยากรณ์:
การคัดลอกรหัสมีดังนี้: document.getElementById ("ส่วนหัว"). style.cssfloat = "ซ้าย";
2. รูปแบบการคำนวณองค์ประกอบ
ด้วยการใช้ Object.style.property, JavaScript สามารถรับและปรับเปลี่ยนรูปแบบ CSS ของวัตถุได้อย่างง่ายดาย อย่างไรก็ตามข้อ จำกัด ของไวยากรณ์นี้คือมันสามารถรับสไตล์อินไลน์ใน HTML เท่านั้นหรือใช้ JavaScript โดยตรงเพื่อตั้งค่าสไตล์ วัตถุสไตล์ไม่สามารถตั้งค่าสไตล์โดยใช้สไตล์ชีทภายนอก เพื่อให้ได้ "สไตล์การคำนวณ" ของวัตถุเราใช้รหัสต่อไปนี้:
เช่นไวยากรณ์:
var myObject = document.getElementById ("ส่วนหัว"); var mystyle = myobject.currentstyle.backgroundColor;Firefox ไวยากรณ์:
var myObject = document.getElementById ("header"); var myComputedStyle = document.defaultView.getComputedStyle (myObject, null);3. รับแอตทริบิวต์ "คลาส" ขององค์ประกอบ
เช่นเดียวกับกรณีของแอตทริบิวต์ "Float" เบราว์เซอร์ทั้งสองใช้วิธี JavaScript ที่แตกต่างกันเพื่อรับแอตทริบิวต์นี้
เช่นไวยากรณ์:
var myObject = document.getElementById ("header"); var myattribute = myObject.getAttribute ("className");Firefox ไวยากรณ์:
var myObject = document.getElementById ("header"); var myattribute = myObject.getAttribute ("คลาส");4. รับแอตทริบิวต์ "สำหรับ" ของแท็กฉลาก
เช่น 3 มีไวยากรณ์ที่แตกต่างกันในการใช้ JavaScript เพื่อรับแอตทริบิวต์ "สำหรับ" ของฉลาก
เช่นไวยากรณ์:
var myObject = document.getElementById ("myLabel"); var myattribute = myObject.getAttribute ("htmlfor");Firefox ไวยากรณ์:
var myObject = document.getElementById ("myLabel"); var myattribute = myObject.getAttribute ("for");ไวยากรณ์เดียวกันก็เป็นจริงสำหรับวิธี setAttribute
5. รับตำแหน่งเคอร์เซอร์
มันเป็นเรื่องยากที่จะได้รับตำแหน่งเคอร์เซอร์ขององค์ประกอบ หากคุณต้องการทำสิ่งนี้ไวยากรณ์ของ IE และ Firefox ก็แตกต่างกันเช่นกัน รหัสตัวอย่างนี้ค่อนข้างพื้นฐานและโดยทั่วไปจะใช้เป็นส่วนหนึ่งของการประมวลผลเหตุการณ์ที่ซับซ้อนจำนวนมากและใช้เพื่ออธิบายความแตกต่างที่นี่เท่านั้น ควรสังเกตว่าผลลัพธ์ใน IE นั้นแตกต่างจากใน Firefox ดังนั้นวิธีนี้จึงมีปัญหาบางอย่าง โดยปกติแล้วความแตกต่างนี้สามารถชดเชยได้โดยรับ "ตำแหน่งการเลื่อน" - แต่นั่นเป็นเรื่องของบทความอื่น
เช่นไวยากรณ์:
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;
6. รับขนาดของหน้าต่างหน้าต่างหรือเบราว์เซอร์
บางครั้งจำเป็นต้องค้นหาขนาดของพื้นที่หน้าต่างที่มีประสิทธิภาพของเบราว์เซอร์ซึ่งมักจะเป็น "หน้าต่าง"
เช่นไวยากรณ์:
var myBrowsersize = [0, 0]; myBrowsERSize [0] = document.documentElement.ClientWidth; myBrowsersize [1] = document.documentElement.clientheight;
Firefox ไวยากรณ์:
var myBrowsersize = [0, 0]; myBrowsersize [0] = window.innerWidth; myBrowsersize [1] = window.innerHeight;
7. อัลฟ่าโปร่งใส
นี่ไม่ใช่โครงการไวยากรณ์สำหรับ JavaScript - อัลฟ่าโปร่งใสถูกตั้งค่าผ่าน CSS อย่างไรก็ตามเมื่อวัตถุถูกตั้งค่าให้จางหายไปผ่าน JavaScript สิ่งนี้จะต้องประสบความสำเร็จโดยการได้รับการตั้งค่าอัลฟ่าของ CSS ซึ่งโดยทั่วไปจะอยู่ในวง หากต้องการเปลี่ยนรหัส CSS ด้วย JavaScript ต่อไปนี้:
เช่นไวยากรณ์:
#MyElement {ตัวกรอง: อัลฟ่า (ความทึบ = 50);}Firefox ไวยากรณ์:
#MyElement {ความทึบ: 0.5;}ในการรับค่าเหล่านี้โดยใช้ JavaScript คุณต้องใช้วัตถุสไตล์:
เช่นไวยากรณ์:
var myObject = document.getElementById ("myelement"); myobject.style.filter = "alpha (ความทึบ = 80)";Firefox ไวยากรณ์:
var myObject = document.getElementById ("myelement"); myobject.style.opacity = "0.5";แน่นอนว่ามีการกล่าวถึงว่าโดยทั่วไปแล้วจะเปลี่ยน opcity/alpha ในช่วงกลางของลูปเพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหว แต่นี่เป็นตัวอย่างง่ายๆเพียงเพื่ออธิบายวิธีการใช้วิธีการอย่างไร
มี 7 คะแนนที่แตกต่างกันในไวยากรณ์ JavaScript ในแง่ของ JavaScript ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน