ก่อนอื่นเรามาประกาศที่นี่รุ่นทดสอบของฉันคือ Chrome15.0.874.121 Firefox 8.01 IE9 Ietetester
รหัสต่อไปนี้เกี่ยวกับคำสั่ง
1: รับแถบกลิ้ง
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น getScroll () {{)
var t, l, w, h;
if (document.documentElement && document.documentedlement.scrolltop) {
t = document.documentelement.scrolltop;
l = document.documentelement.scrollleft;
w = document.documentelement.scrollwidth;
h = document.documentelement.scrollheight;
-
อื่น
if (document.body) {
t = document.body.scrolltop;
l = document.body.scrollleft;
w = document.body.scrollwidth;
h = document.body.scrollheight;
-
กลับ {
T: T,
l: l,
W: W,
H: H
-
-
2: รับความสูงความกว้างของเบราว์เซอร์ดู
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น getPageWidth () {
var pagewidth = window.innerWidth;
ifof pagewindth! = "number") {{
if (document.CompatMode == "CSS1COMPAT") {{
pagewidth = document.documentElement.ClientWidth;
-
อื่น {
pagewidth = document.body.clientwidth;
-
-
กลับมา pagewidth;
-
ฟังก์ชั่น getPageHeight () {
var pageHeight = window.innerHeight;
ifof pagewindth! = "number") {{
if (document.CompatMode == "CSS1COMPAT") {{
pageHeight = document.documentelement.clientheight;
-
อื่น {
pageHeight = document.body.clitingHeight;
-
-
กลับมาหน้า;
-
3: รับชื่อรุ่นเบราว์เซอร์ปัจจุบัน
คัดลอกรหัสรหัสดังนี้:
การทำงาน () {
var sys = {};
var ua = navigator.useragent.toLowercase ();
var s;
(s = ua.match (/msie ([/d.+)/))? /)? (/โอเปร่า (#/d.+)/))? )))))))))))))
ถ้า (sys.ie! = null) {
return ("IE:" + sys.ie);
-
if (sys.firefox! = null) {
return ("Firefox:" + sys.firefox);
-
if (sys.chrome! = null) {
return ("Chrome:" + sys.chrome);
-
ถ้า (sys.opera! = null) {
return ("Opera:" + sys.opera);
-
if (sys.safari! = null) {
return ("Safari:" + sys.safari);
-
-
4: การตรวจสอบเหตุการณ์
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {{
if (element.addeVentRistener) {{
Element.addeventListener (ประเภท, ตัวจัดการ, เท็จ);
-
อื่น
ifment.attachevent) {
element.attachevent ("on" + type, handler);
-
อื่น {
องค์ประกอบ [บน " + type] = ตัวจัดการ;
-
-
5: การลบเหตุการณ์
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น (องค์ประกอบ, ประเภท, ตัวจัดการ) {{
if (element.removeEventListener) {
Element.RemoveEventListener (ประเภท, ตัวจัดการ, เท็จ);
-
อื่น
ifment.detachevent) {
element.detachevent ("on" + type, handler);
-
อื่น {
องค์ประกอบ ["on" + type] = null;
-
-
6: เมื่อเหตุการณ์เมื่อมีการแจกจ่ายเหตุการณ์ Firefox อย่างต่อเนื่องจะมีปัญหากับเหตุการณ์แรก
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น (เหตุการณ์) {
เหตุการณ์ = (เหตุการณ์? เหตุการณ์: window.event);
if (event == null) {
var $ e = function () {
var c = $ e.caller;
ในขณะที่ (C.Caller)
C = C.Caller;
กลับ c.Arguments [0]
-
__definegetter __ ("เหตุการณ์", $ e);
-
เหตุการณ์กลับ;
-
7: ป้องกันเหตุการณ์เริ่มต้น
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น (เหตุการณ์) {
if (event.preventDefault) {
Event.preventDefault ();
-
อื่น {
Event.ReturnValue = FALSE;
-
-
8: อย่าแพร่กระจายเหตุการณ์ต่อไป
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น (เหตุการณ์) {
if (event.stoppropagation) {
Event.StopPropagation ();
-
อื่น {
Event.cancelBubble = true;
-
-
9: รับเป้าหมายของเหตุการณ์
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น (เหตุการณ์) {
return event.target || เหตุการณ์.
-
10: documen.doctype ไม่สอดคล้องกับการสนับสนุน
E: หากมีคำอธิบายประเภทเอกสารมันจะถูกอธิบายโดยข้อผิดพลาดเป็นคำอธิบายประกอบและเกี่ยวกับมันเป็นโหนดความคิดเห็น
Firefox: หากมีคำอธิบายประเภทเอกสารให้ใช้เป็นข้อมูลย่อยแรกของเอกสาร
Safari, Chrome, Opera: หากมีคำอธิบายประเภทเอกสารมันจะถูกอธิบายว่าเป็นคำอธิบาย แต่จะไม่ปรากฏใน ChildNodes เป็น sub -node ของเอกสาร
11: ค้นหาองค์ประกอบ
บางครั้งฉันก็ไม่เข้าใจสิ่งที่เช่นกำลังทำอยู่เสมอฉันต้องการสร้างความแตกต่างเสมอ หากระบบไม่ปล่อยให้เบราว์เซอร์ตัวเองฉันกล้าที่จะบอกว่าส่วนแบ่งของ IE จะน้อยลง
หากรหัสและชื่อเหมือนกันเขาจะถูกส่งคืนด้วย
คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<สคริปต์เลื่อนลอย>
var it item = document.getElementById ("my");
ITM.VALUE = "Second";
</script>
</head>
<body>
<input type = "text" name = "my" value = "First">
</body>
</html>
ใน IE การเปลี่ยนแปลงผลลัพธ์
เช่นเดียวกัน ID ไม่โดดเด่น
คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<สคริปต์เลื่อนลอย>
var it item = document.getElementById ("my");
ITM.VALUE = "Second";
</script>
</head>
<body>
<input type = "text" id = "my" value = "First">
</body>
</html>
ขออภัยผลลัพธ์ของเขาเปลี่ยนไปอีกครั้ง
12: หากเป็นแอตทริบิวต์ที่กำหนดเอง item.myattributs ไม่สามารถวาดผลลัพธ์ที่ถูกต้องได้โดยไม่ต้องใช้เบราว์เซอร์ IE
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชั่น (item, myatt) {
คืนค่า itm.attributes [myatt]
-
ในกรณีเดียวกันแอตทริบิวต์การตั้งค่าควรรู้ว่าจะทำอย่างไรนั่นคือการมอบหมาย
คัดลอกรหัสรหัสดังนี้:
ฟังก์ชัน (item, myatt, value) {
item.attributes [myatt]
-
13: จำนวน sub -nodes ขององค์ประกอบ
คัดลอกรหัสรหัสดังนี้:
<ul id = "myul">
<li> ก่อน </li>
<li> วินาที </li>
<li> สาม </li>
</ul>
ผลลัพธ์ IE คือ 3 และเบราว์เซอร์อื่นคือ 7
สัญลักษณ์ว่างระหว่างโหนดคือโหนดข้อความในเบราว์เซอร์อื่นและผลลัพธ์คือ 7 ถ้าเป็นเช่นนี้
คัดลอกรหัสรหัสดังนี้:
<ul id = "myul"> <li> ก่อน </li> <li> วินาที </li> <li> ที่สาม </li> </ul>
ด้วยวิธีนี้ผลลัพธ์ของทุกคนคือ 3
14: สร้างปัญหาโหนด
คัดลอกรหัสรหัสดังนี้:
// เพิ่มองค์ประกอบแบบไดนามิกเบราว์เซอร์ทั้งหมดสามารถทำได้
var newNode = document.createElement ("อินพุต");
newNode.type = "ปุ่ม";
newNode.value = "Sixth";
// สามารถรับรู้ได้ใน IE
var newNode = document.createElement ("<input type =/" ปุ่ม/">"> ">);
15: เมื่อป้องกันการคลิกที่ถูกต้อง Firefox จะแตกต่างจากคนอื่น ๆ ในเหตุการณ์ oncontextmenu
16: เมื่อเพิ่มสไตล์และสคริปต์แบบไดนามิกเช่นเบราว์เซอร์อื่น ๆ จะแตกต่างกัน การตรวจสอบเฉพาะ
17: สำหรับ DOM2 และ DOM3 สถานการณ์มีความซับซ้อนมากขึ้น