// version 1.0.0 create 2017-05-22 /** * JavaScript 运算符 */ // instanceof var box = { color: "red" }; box instanceof Array; // false var box = [1, 2]; box instanceof Array; // true /** * JavaScript 函数 */ // 用变量初始化函数 var box = function(num1, num2) { return num1 + num2; }; box(1, 2); // 3 // 函数可以传递函数 function mySum(num) { return 10 + num; } function box(mySum, num) { return mySum(num); } box(mySum, 10); // 20 // 函数递归 arguments.callee() function box(num) { if (num == 1) { return 1; } else { return num * arguments.callee(num - 1); } } box(5); // 120 // apply() function box(name, age) { return name + age; } function sum(name, age) { // this表示window作用域 // []表示传递的参数 可以用arguments代替 // box.apply(this, [name, age]) 等价于 box.apply(this, arguments) return box.apply(this, [name, age]); } // box.length 表示函数接收的参数个数 box.length; // 2 sum("test", 18); // "test18" // call() function box(name, age) { return name + age; } function sum(name, age) { return box.call(this, name, age); } sum("test", 18); // "test18" var color = "红色"; var box = { color: "蓝色" }; function sayColor() { return this.color; } sayColor.call(window); // "红色" sayColor.call(box); // "蓝色" /** * JavaScript 变量 */ // 全局变量 也是window的属性 var color = 'red'; this.color; // "red" window.color; // "red" window.color = 'green'; this.color; // "green" color; // "green" // 局部变量 var box = { color: 'blue', getColor: function() { // this是box对象 return this.color; } }; box.color; // "blue" box.getColor(); // "blue" window.color; // "green" window.box.color; // "blue" // this是window对象 this.color; // "green" this.box.getColor(); // "blue" /** * JavaScript 作用域 */ function box() { var outer = "box内全局作用域"; (function() { // 自我执行的匿名函数 私有作用域 var inner = "box内局部作用域"; console.log("in outer: " + outer); // in outer: box内全局作用域 console.log("in inner: " + inner); // in inner: box内局部作用域 })(); console.log("out outer: " + outer); // out outer: box内全局作用域 console.log("out inner: " + inner); // Uncaught ReferenceError: inner is not defined } box(); function Box() { // Box 私有变量 var age = 100; // Box 私有函数 function run() { return "运行中"; } // Box 对外可见的公有接口 this.publicFun = function() { return age + run(); } } var box = new Box(); box; // Box {publicFun: function(), __proto__: Object} box.publicFun(); // "100运行中" // if(){} for(){} 函数的()和{}没有封闭作用域 其中定义的变量为全局变量 var color = "red"; console.log(color); // red console.log(box); // undefined if (true) { var color = "yellow"; var box = "circle"; } console.log(color); // yellow console.log(box); // circle var i = -1; console.log(i); // -1 console.log(j); // undefined for(var i = 0, j = 0; i < 1; i++, j++){ console.log(i); // 0 console.log(j); // 0 } console.log(i); // 1 console.log(j); // 1 // JavaScript Array 对象 var box = [5, 3, 4, 2, 1]; // sort() 按字母顺序对数组中的元素进行排序 box.sort(); // [1, 2, 3, 4, 5] // push() 向数组的末尾添加一个或更多元素,并返回新的长度。 box.push(6); // 6 box; // [1, 2, 3, 4, 5, 6] /** * JavaScript 操作 DOM 对象 */ /* * 文档对象模型(Document Object Model,简称DOM) */ // 确认对话框 有确定和取消两个按钮 if (confirm("请选择!")) { console.log("刚刚你选择的是确定按钮"); } else { console.log("刚刚你选择的是取消按钮"); } // 输入提示框 // 第一个参数是说明文字 第二个参数是默认值 返回结果是输入的内容 var box = prompt("请输入一个数字", 0); if (box) { console.log("你刚刚输入的内容是: " + box); } else if (box == null) { console.log("你刚刚取消了输入!"); } else if (box == "") { console.log("你刚刚什么也没有输入!"); } else { console.log("你怎么进来的?"); } // 打印 print(); /* * 重要事项:请不要混淆方法 Window.open() 与方法 Document.open(),这两者的功能完全不同。 * 为了使您的代码清楚明白,请使用 Window.open(),而不要使用 open()。 * window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 * window.open(URL, name, features, replace) * URL 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了 URL 这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。 * name 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。 * features 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。 * replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。 */ /* * 窗口特征(Window Features) * channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。 * directories=yes|no|1|0 是否添加目录按钮。默认为 yes。 * fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 * height=pixels 窗口文档显示区的高度。以像素计。 * left=pixels 窗口的 x 坐标。以像素计。 * location=yes|no|1|0 是否显示地址字段。默认是 yes。 * menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。 * resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。 * scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。 * status=yes|no|1|0 是否添加状态栏。默认是 yes。 * titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。 * toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。 * top=pixels 窗口的 y 坐标。 * width=pixels 窗口的文档显示区的宽度。以像素计。 */ // 打开一个新的浏览器窗口并且返回这个窗口 这个新窗口里面什么也没有 var box = window.open(); box; // Window {...} // 父页面操作子窗口 box.alert("我是父页面操作子窗口弹出来的"); // 给这个新窗口定义一个名字 box.name = "newWindowTest"; // 在这个新窗口中打开百度首页 window.open("http://www.baidu.com/", "newWindowTest"); // 在父页面直接打开腾讯首页 window.open("http://www.qq.com/", "_parent"); // 在新窗口打开网易 window.open("http://www.sina.com.cn/", "_blank", "width=200,height=100", false); // 子窗口操作父窗口 // 没有测试成功 /* Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. */ window.opener.document.write("子窗口控制该语句在父窗口输出"); window.parent.document.write("子窗口控制该语句在父窗口输出"); // screenLeft 和 screenTop 属性返回窗口相对于屏幕的 X 和 Y 坐标。 // screenX 和 screenY 属性返回窗口相对于屏幕的 X 和 Y 坐标。 // 所有主流浏览器都支持 screenLeft 和 screenTop 属性,Firefox 除外。 // 所有主要浏览器都支持 screenX 和 screenY 属性,Internet Explorer 除外。 // 兼容问题解决方案 var leftX = typeof window.screenLeft == 'number' ? window.screenLeft: window.screenX; var topY = typeof window.screenTop == 'number' ? window.screenTop: window.screenY; // Internet Explorer 下运行 leftX; // 6 topY; // 60 typeof window.screenLeft; // "number" typeof window.screenX; // "number" window.screenLeft; // 6 // window.screenX 在 IE 中类型也为 number 但是获取的值 不正确 // 所以只能判断 window.screenLeft 的类型是否为 number window.screenX; // 0 // Firefox 下运行 leftX; // 21 topY; // 193 typeof window.screenLeft; // "undefined" typeof window.screenX; // "number" window.screenLeft; // undefined window.screenX; // 21 // innerWidth 返回窗口的文档显示区的宽度。不包含工具条与滚动条。 // innerHeight 返回窗口的文档显示区的高度。不包含工具条与滚动条。 // 所有主流浏览器都支持 innerWidth 和 innerHeight 属性。IE 8 及更早 IE版本不支持这两个属性。 /* * compatMode 标准兼容模式 * BackCompat:标准兼容模式关闭。BackCompat 对应 quirks mode 怪异模式。 * 宽度 document.body.clientWidth; 高度 document.body.clientHeight; * CSS1Compat:标准兼容模式开启。CSS1Compat 对应 strict mode 严格模式。 * 宽度 document.documentElement.clientWidth; 高度 document.documentElement.clientHeight; * 历史原因 早期的浏览器 Netscape 4 和 Explorer 4 对 CSS 进行解析时,并未遵守 W3C 标准,这时的解析方式就被我们称之为 quirks mode(怪异模式),但随着 W3C 的标准越来越重要,众多的浏览器开始依照 W3C 标准解析 CSS,仿照 W3C 标准解析 CSS 的模式我们叫做 strict mode(严格模式) */ // chrome 中运行 window.innerWidth; // 428 window.innerHeight; // 909 document.documentElement.clientWidth; // 428 document.documentElement.clientHeight; // 909 document.body.clientWidth; // 428 document.body.clientHeight; // 909 document.compatMode; // "BackCompat" // IE11 中运行 window.innerWidth; // 1010 window.innerHeight; // 26 document.documentElement.clientWidth; // 1010 document.documentElement.clientHeight; // 26 document.body.clientWidth; // 1010 document.body.clientHeight; // 26 document.compatMode; // "BackCompat" // IE8 中运行 window.innerWidth; // undefined window.innerHeight; // undefined document.documentElement.clientWidth; // 1007 document.documentElement.clientHeight; // 23 document.body.clientWidth; // 994 document.body.clientHeight; // 0 document.compatMode; // "CSS1Compat" // 兼容问题解决方案 var width = window.innerWidth; var height = window.innerHeight; if (typeof width != 'number') { // IE 8 及更早 IE 版本 if (document.compatMode == 'CSS1Compat') { // 标准兼容模式开启 width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; } else { // 标准兼容模式关闭 width = document.body.clientWidth; height = document.body.clientHeight; } } // chrome 中运行 width; // 428 height; // 909 // IE11 中运行 width; // 1010 height; // 26 // IE8 中运行 width; // 1007 height; // 23 // outerWidth 属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。 // outerHeight 属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。 // 所有主流浏览器都支持 outerWidth 和 outerHeight 属性。IE 8 及更早 IE 版本不支持该属性。 // chrome 中运行 window.outerWidth; // 795 window.outerHeight; // 665 // IE11 中运行 window.outerWidth; // 1023 window.outerHeight; // 529 // window.screen 用户屏幕的信息 可以省略window前缀 window.screen; // 可用的屏幕宽度 screen.availWidth; // 1280 // 可用的屏幕高度 screen.availHeight; // 944 // 屏幕宽度 screen.width; // 1280 // 屏幕高度 screen.height; // 1024 var myWindow = window.open('', '', 'width=200,height=200'); // window.moveTo(x, y) 可把窗口的左上角移动到一个指定的坐标(x,y)。 myWindow.moveTo(100, 100); // window.resizeTo(width, height) 调整窗口大小为指定宽高 myWindow.resizeTo(500, 500); var myWindow = window.open('', '', 'width=200,height=200'); // window.moveBy(x, y) 可把窗口的左上角移动到一个指定的坐标(x,y)。 myWindow.moveBy(100, 100); // window.resizeBy(width, height) 根据指定的像素来调整窗口的大小。 // width 必需。要使窗口宽度增加的像素数。可以是正、负数值。 // height 可选。要使窗口高度增加的像素数。可以是正、负数值。 myWindow.resizeBy(100, 100); // setTimeout() 超时调用 只执行依次 // 第一个参数是需要执行的代码,可以是字符串,它能自动解析。 // 第二个参数是间隔时间,单位为毫秒。 // 不容易扩展 setTimeout("console.log('Lee')", 2000); // Lee // 封装行不好 function box() { console.log('Lee'); } setTimeout(box, 2000); // Lee // 推荐 setTimeout(function() { console.log('Lee'); }, 2000) // Lee // 返回值是超时调用的ID var box = setTimeout(function() { console.log('Lee'); }, 5000) // 取消超时调用 在五秒之内取消调用 将不再输出 Lee clearTimeout(box); // setInterval() 间歇调用 每设定时间后调用一次 // 返回值是间歇调用的ID var box = setInterval(function() { console.log('Lee'); }, 1000) // 见下 /* Lee Lee Lee ... */ //取消间歇调用 取消之后不再调用 clearInterval(box); // window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。对象在编写时可不使用 window 这个前缀。 location === window.location; // true window.document.location === window.location; // true window.location; // 重定向到百度首页 location = "http://www.baidu.com"; location.href = "http://www.baidu.com"; location.assign("http://www.baidu.com"); location.replace("http://www.baidu.com"); // location.href 切换后,产生历史记录,可以退回到原页面。 // location.replace 切换后,不产生历史记录,不可以退回到原页面。 // window.history 对象包含浏览器的历史。window.history 对象在编写时可不使用 window 这个前缀。 window.history; // 前一条历史记录 history.back(); // 后一条历史记录 history.forward(); // 历史记录条数 history.length; // 寻找指定的历史记录 history.go(10); // window.navigator 对象包含有关访问者浏览器的信息。window.navigator 对象在编写时可不使用 window 这个前缀。 navigator; /* * 浏览器渲染引擎(又称排版引擎或内核) * 1.1 Trident [?tra?dnt] 又称为MSHTML。IE内核。 * 1.2 EdgeHTML Edge内核。 * 2. Gecko [?gek??] Firefox内核。 * 3. Presto [?prest??] Opera前期内核(已废弃),Opera现已改用Blink内核。从下面的测试看Opera的内核是 Webkit。 * 4. Blink 由Google和Opera开发,由webkit衍生而来。Chrome 和 Opera 内核。从下面的测试看Chrome的内核是 Webkit。 * 5. Webkit Safari内核。从下面的测试看 Webkit 也是 Opera 和 Chrome 的内核。 * Webkit 包含两块内容 * 1. WebCore 关于浏览器渲染引擎的,是由KDE所开发的KHTML的衍生产品。 * 2. JSCore 关于脚本处理的,是由KDE所开发的KJS的衍生产品。 */ // 用户代理字符串 navigator.userAgent; // 见下 // Opera // "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 OPR/44.0.2510.1449" // Chrome // "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36" // Safari // "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2" // Firefox // "Mozilla/5.0 (Windows NT 6.1; rv:53.0) Gecko/20100101 Firefox/53.0" // Edge // "Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; rv:11.0) like Gecko" // IE8 // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)" // window.opera opera5开始有的一个脚本object,一个boolean的值,用来检察浏览器是否是opera。 // 没有测试成功 // 系统 navigator.platform; // 插件 navigator.plugins; navigator.plugins.length; // MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。 // IE浏览器不支持 navigator.mimeTypes; navigator.mimeTypes.length; // window.Node 节点类型值 1元素 2属性 3文本 对象在编写时可不使用 window 这个前缀。 window.Node; // function Node() { [native code] } Node.ELEMENT_NODE; // 1 Node.ATTRIBUTE_NODE; // 2 Node.TEXT_NODE; // 3 // window.document 对象在编写时可不使用 window 这个前缀。 // 在百度运行 window.document; // #document document.title; // "百度一下,你就知道" document.URL; // "https://www.baidu.com/" document.domain; // "www.baidu.com" // 服务器端上一个URL document.referrer; // "" // 在百度>新闻运行 window.document; // #document document.title; // "百度新闻搜索——全球最大的中文新闻平台" document.URL; // "http://news.baidu.com/" document.domain; // "news.baidu.com" // 服务器端上一个URL document.referrer; // "https://www.baidu.com/" // 状态栏默认值 window.defaultStatus = "默认状态"; // 状态栏设置值 window.status = "状态"; window.find("盒子"); // true window.onload = function() { // 页面加载完成后自动执行代码 } var all = document.getElementsByTagName("*"); console.log(all.length); // 见下 // chrome // 11 // ie11 // 11 // ie8 浏览器多一个节点是把<!DOCTYPE html>文档声明也算进去了 // 12 // Firefox/53.0 // 11 // 火狐浏览器的firebug打开后,会自动生成一个div,所以获取的标签会多一个 测试不成功 或许是低版本 var li = document.getElementsByTagName("li"); console.log(li.length); // 2 console.log(li[0]); // <li>no1</li> console.log(li.item(0)); // <li>no1</li> console.log(li.item(0).innerHTML); // no1 var box = document.getElementById("box"); // 获取标签的文本,包含HTML标签 console.log(box.innerHTML); // 我是一个盒子 // 赋值 box.innerHTML = ""; console.log(box.innerHTML); // 空白 // 获取style属性中的color值 console.log(box.style.color); // red // 在chrome浏览器中运行的输出结果 // 其他浏览器中会有差异 console.log(box.getAttribute('style')); // color:red; console.log(box.getAttribute('class')); // box // class为保留字 用className代替class console.log(box.className); // box console.log(box.getAttribute("onclick")); // hello() box.removeAttribute("style"); box.setAttribute("style", "color:blue;"); // 获取元素节点的类型值 console.log(box.nodeType); // 1 console.log(box.getAttributeNode('style').nodeType); // 2 console.log(box.firstChild.nodeType); // 3 // 获取元素节点的标签名 console.log(box.tagName); // DIV console.log(box.nodeName); // DIV console.log(box.getAttributeNode('style').nodeName); // style console.log(box.firstChild.nodeName); // #text // 获取文本节点的文本内容 console.log(box.nodeValue); // null console.log(box.getAttributeNode('style').nodeValue); // color:blue; console.log(box.firstChild.nodeValue); // 我是一个盒子 // NodeList集合 返回当前节点的所有子节点 console.log(box.childNodes); // [text] // 获取第一个子节点 console.log(box.firstChild); // "我是一个盒子" console.log(typeof box.firstChild); // object // 获取最后一个子节点 console.log(box.lastChild); // "我是一个盒子" console.log(typeof box.lastChild); // object // 返回文档对象 也就是根节点 console.log(box.ownerDocument); // #document // 父节点 console.log(box.parentNode); // <body>...</body> // 前一个兄弟节点 console.log(box.previousSibling); // #text // 后一个兄弟节点 console.log(box.nextSibling); // #text // 集合数组 保存这个元素节点的属性列表 console.log(box.attributes); // NamedNodeMap {0: class, 1: id, 2: name, 3: onclick, 4: style, length: 5} console.log(box.attributes[0]); // class="box" console.log(box.attributes['id']); // id="box" // 创建一个文本节点 var text = document.createTextNode("测试"); // 创建一个p节点 var p = document.createElement("p"); // 把文本添加到p节点里 p.appendChild(text); // 添加到box的子节点列表的最后 box.appendChild(p); // 在box前面添加一个节点p box.parentNode.insertBefore(p, box); var span = document.createElement('span'); // 把文本添加到span节点里 span.appendChild(text); // 把p标签替换成span标签 box.parentNode.replaceChild(span, p) // true 克隆标签和其内容 false 只克隆标签 var clone = box.previousSibling.cloneNode(true); box.appendChild(clone); var clone = box.previousSibling.cloneNode(false); box.appendChild(clone); box.removeChild(box.firstChild); // 获取文本并过滤掉html box.innerText; // "我是一个盒子" box.outerText; // "我是一个盒子" // 获取文本不过滤HTML box.innerHTML; // "<span>我是一个盒子</span>" box.outerHTML; // "<div class="box" id="box" name="box" style="color:red;" οnclick="hello()"><span>我是一个盒子</span></div>" // normalize() 方法移除空的文本节点,并连接相邻的文本节点。不知道怎么测试 box.normalize(); var box = document.getElementById("box"); box.childNodes; // ["我是一个盒子"] box.childNodes.length; // 1 // 把前三个字符分离出来成一个新的节点 box.childNodes[0].splitText(3); // "个盒子" box.childNodes; // ["我是一", "个盒子"] box.childNodes.length; // 2 var box = document.getElementById("box"); box.childNodes; // ["我是一个盒子"] // 把前三个字符删除 box.childNodes[0].deleteData(0, 3); box.childNodes; // ["个盒子"] var box = document.getElementById("box"); box.childNodes; // ["我是一个盒子"] // 在第一个字符前面插入hello box.childNodes[0].insertData(0, 'Hello'); var box = document.getElementById("box"); box.childNodes; // ["我是一个盒子"] // 把第0个到2个替换成miss box.childNodes[0].replaceData(0, 2, 'miss'); box.childNodes; // ["miss一个盒子"] var box = document.getElementById("box"); box.childNodes; // ["我是一个盒子"] // 获取第0个到2个字符 box.childNodes[0].substringData(0, 2); // "我是" box.childNodes; // ["我是一个盒子"] // 每次刷新,都让box处于可见范围内 box.scrollIntoView(); // children会忽略文本节点 box.children; // ["<span>我是一个盒子</span>", "<span></span>"] box.children.length; // 2 // childNodes不忽略文本节点 box.childNodes; // [" 我是一个盒子 ", "<span>我是一个盒子</span>", " 我是一个盒子 ", "<span></span>", " "] box.childNodes.length; // 5 // 不忽略文本节点 var p = box.firstChild; // " 我是一个盒子 " // 忽略文本节点 var pp = box.firstElementChild; // "<span>我是一个盒子</span>" // 判定 box 是不是 p 的父节点 box.contains(p); // true box.contains(pp); // true // 火狐旧版本不支持contains() 创建了自己的方法 compareDocumentPosition(); 没有测试 document.write("测试完成"); // 快速定位到指定位置进行调试 debugger; /** * 通过身份证号码获取生日信息 */ function getBirthdayFromID(no){ var year,month,day; if(no.length == 15){ // 身份证为15位 7-12位出生年月日 比如670401代表1967年4月1日 year = '19' + no.substr(6,2); month = no.substr(8,2); day = no.substr(10,2); } else if(no.length == 18){ // 身份证为18位 7-14位出生年月日 比如19670401代表1967年4月1日 year = no.substr(6,4); month = no.substr(10,2); day = no.substr(12,2); } return year + "-" + month + "-" + day; } /** * 获取光标所在对象的位置 */ function getCursorPosition() { var position = {top:0, left:0}; var e = window.event; position.left = e.clientX - e.offsetX + (document.body.scrollLeft || document.documentElement.scrollLeft); position.top = e.clientY - e.offsetY + (document.body.scrollTop || document.documentElement.scrollTop); return position; /* * e.clientX 鼠标指针位置相对于窗口客户区域的 x 坐标。 * e.clientY 鼠标指针位置相对于窗口客户区域的 y 坐标。 * e.offsetX 鼠标指针位置相对于触发事件的对象的 x 坐标。 * e.offsetY 鼠标指针位置相对于触发事件的对象的 y 坐标。 * document.body.scrollLeft 屏幕滚动的 x 坐标,使用默认dtd。 * document.documentElement.scrollLeft 屏幕滚动的 x 坐标,使用http://www.w3.org/TR/html4/loose.dtd。 * document.body.scrollTop 屏幕滚动的 y 坐标,使用默认dtd。 * document.documentElement.scrollTop 屏幕滚动的 y 坐标,使用http://www.w3.org/TR/html4/loose.dtd。 * * var myDivObj = document.getElementById("myDiv"); * myDivObj.style.left = position.left; * myDivObj.style.top = position.top; * * position:absolute; */ }