摘要：
对于桌面浏览器，通常我们用 screen.width 和 screen.height 得到屏幕的大小，然后用 window.innerWidth 和 window.innerHeight（对于标准浏览器）或者document.documentElement.clientWidth 和 document.documentElement.clientHeight（对于 IE8-）取得视区（viewport）的大小。知道了视区大小我们就可以让页面占满整个显示区域且不会出现窗口滚动条。对于桌面浏览器，默认视区大小一般总是小于屏幕大小的，因为还有操作系统和浏览器本身都要占用一定的空间。而对于手机浏览器， 阅读全文
摘要：
元素的 z-index 属性规定了它的的层叠级别（stack level），这些级别确定了元素之间互相覆盖时的层叠顺序。但是 z-index 似乎没那么简单，这里总结一下。首先是层叠内容（stack context）的概念。层叠内容由下列这些元素形成（其中定位元素指 position 不为默认值 static 的元素）：根元素 HTMLz-index 不为默认值 auto 的定位元素opacity 小于默认值 1 的元素但其中要注意几个问题：（1）对于非定位（即 position 为 static）的元素，设置 z-index 无效；（2）在 IE8 之前，定位元素的默认 z-index 为 阅读全文
摘要：
在 IE 和 Fireofx 浏览器中都可以用window.showModalDialog 方法弹出一个模态窗口，在关闭该窗口之前，主窗口将不能操作。Chrome 虽然支持此方法，却只是将它当成普通的弹出窗口，没有禁止主窗口的操作。为了跨浏览器考虑，有必要用 DIV 和 CSS 生成模态窗口。基本的方法是，通过设置 z-index，用一个占满全部显示区域的覆盖层 DIV 放在主要内容前面，再将模态窗口 DIV 放在覆盖层前面。为了让用户知道主窗口的内容暂时不可使用，可以对覆盖层 DIV 设置半透明的灰色背景。例如（查看效果）：<!DOCTYPE html><html>& 阅读全文
摘要：
利用上一篇文章说明的方法，我们对事件添加了处理程序，然后可以来具体处理事件了。首先大部分浏览器会将event 对象作为参数传递给事件处理程序，从而我们可从 event 对象中读取事件的具体内容。但是在 IE9 之前用 DOM0 级方法添加的事件处理程序，event 事件是作为 window 对象的属性传递过去的。因此，我们需要用下面的方法保证跨浏览器的兼容性：var handler = function(event) { var ev = event ? event : window.event; alert(ev.type);};如果要得到触发该事件的元素，在标准浏览器中可以用 ... 阅读全文
摘要：
首先是事件的类型：事件主要分为页面事件（例如 load，unload，resize，scroll，focus，blur），鼠标事件（例如 mousemove，mousedown，mouseup，click，dblclick，mouseover，mouseout）和键盘事件（例如 keydown，keyup，keypress）等类别。在不同的浏览器中，不同的 DOM 元素能触发的事件各不相同。而 window 对象这个特殊元素也能触发各种页面事件，但是在 IE9 之前的浏览器中不能触发鼠标事件和键盘事件，但我们可以用 document 元素的对应事件。用 JavaScript 绑定事件处理程序的 阅读全文