offsetLeft和style.left区别：
n offsetLeft 获取的是相对于父对象的左边距，left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距，如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，
这同offsetLeft是相同的。
n style.left返回的是字符串，比如10px，而offsetLeft返回的是数值，比如数值10。如果需要对取得的值进行计算，还用offsetLeft比较方便。
n style.left是可读写的，offsetLeft是只读的，所以要改变div的位置，只能修style.left。
n style.left的值需要事先定义(在样式表中定义无效，只能取到在html中定义的值)，否则取到的值是空的。而且必须要定义在html里，如果定义在css里，style.left的值仍然为空，是取不到style.left的值的。
getComputedStyle与currentStyle
getComputedStyle：是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
语法：var style = window.getComputedStyle("元素", "伪类");
如： var dom = document.getElementById("test"),
style = window.getComputedStyle(dom , ":after");
getComputedStyle()：接受两个参数要取得计算样式的元素和一个伪元素，如果不需要伪元素，则可以是null。然而，在IE中，并不支持getComputedStyle，IE提供了currentStyle属性。
getComputedStyle(obj , false ) 是支持 w3c (FF12、chrome 14、safari)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。
缺点:在标准浏览器中正常，但在IE6/7/8中不支持，另外：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在不是必需的参数了。
例如：
window.onload=function(){
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(){
//alert(oDiv.style.width); //写在样式表里无法读取，只能得到写在行内的
//alert(getComputedStyle(oDiv).width); //适用于标准浏览器IE6、7、8不识别
//alert(oDiv.currentStyle.width); //适用于IE浏览器，标准浏览器不识别
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv).width);
}
};
};
取消表单提交
<script type="text/javascript">
function listenEvent(eventObj,event,eventHandler){
if(eventObj.addEventListener){
eventObj.addEventListener(event,eventHandler,false);
}else if(eventObj.attachEvent){
event = "on" + event;
eventObj.attachEvent(event,eventHandler);
}else{
eventObj["on" + event] = eventHandler;
}
}
function cancelEvent(event){
if(event.preventDefault){
event.preventDefault(); //w3c
}else{
event.returnValue = true; //IE
}
}
window.onload = function () {
var form = document.forms["picker"];
listenEvent(form,"submit",validateFields);
};
function validateFields(evt){
evt = evt ? evt : window.event;
...
if(invalid){
cancelEvent(evt);
}
}
</script>
确定浏览器窗口的尺寸
对于主流浏览器来说，比如IE9、Firefox，Chrome和Safari，支持名为innerWidth 和 innerHeight的窗口对象属性，它返回窗口的视口区域，减去任何滚动条的大小。
IE不支持innerWidth 和 innerHeight。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。
例如：
<script type="text/javascript">
function size(){
var w = 0, h=0;
if(!window.innerWidth){
w = (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth);
h = (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
}else{
w = window.innerWidth;
h = window.innerHeight;
}
return {width:w,height:h};
}
console.log(size());//Object { width: 1366, height: 633 }
</script>
实用的 JavaScript 方案（涵盖所有浏览器）：
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;
对于 IE 6、7、8的方案如下：
document.documentElement.clientHeight || document.body.clientHeight
document.documentElement.clientWidth || document.body.clientWidth
Document对象的body属性对应HTML文档的<body>标签。Document对象的documentElement属性则表示 HTML文档的根节点。
attributes 属性：
attributes 属性返回该节点的属性节点集合:
document.getElementById('box').attributes//NamedNodeMap
document.getElementById('box').attributes.length;//返回属性节点个数
document.getElementById('box').attributes[0]; //Attr，返回最后一个属性节点
document.getElementById('box').attributes[0].nodeType; //2，节点类型
document.getElementById('box').attributes[0].nodeValue; //属性值
document.getElementById('box').attributes['id']; //Attr，返回属性为 id 的节点
document.getElementById('box').attributes.getNamedItem('id'); //Attr
dataTransfer 对象：
| 属性 | 描述 |
| dropEffect | 设置或获取拖曳操作的类型和要显示的光标类型 |
| effectAllowed | 设置或获取数据传送操作可应用于该对象的源元素 |
| 方法 | 描述 |
| clearData | 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式 |
| getData | 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据 |
| setData | 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据 |
HTML5拖拽的浏览器支持：
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放
为了使元素可拖动，需把 draggable 属性设置为 true ：<img draggable="true" />
| 事件 | 描述 |
| dragstart | 拖拽事件开始 |
| drag | 在拖动操作上 |
| dragenter | 拖动到目标上，用来决定目标是否接受放置 |
| dragover | 拖动到目标上，用来决定给用户的反馈 |
| drop | 放置发生 |
| dragleave | 拖动离开目标 |
| dragend | 拖动操作结束 |
innerText的问题：
innerText在IE中能正常工作，但是innerText在FireFox中却不行。
<p id="element"></p>
<script type="text/javascript">
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
</script>
跨浏览器获取和设置innerText
//跨浏览器获取innerText
function getInnerText(element){
return (typeof element.textContent == 'string') ? element.textContent : element.innerText;
}
//跨浏览器设置innerText
function setInnerText(element,text){
if(typeof element.textContent == 'string'){
element.textContent = text;
}else{
element.innerText = text;
}
}
oninput,onpropertychange,onchange的用法:
onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。
访问XMLHTTPRequest对象：
<script type="text/javascript">
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//非IE
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHttp");//IE
}
</script>
禁止选取网页内容：
问题： FF需要用CSS禁止，IE用JS禁止
解决方法： IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
三大不冒泡事件:
A. 所有浏览器的focus/blur事件都不冒泡，万幸的是大部分浏览器支持focusin/focusout事件，不过可恶的firefox连这个都不支持。
B. IE6、7、8下 submit事件不冒泡。
C. IE6、7、8下 change事件要等到blur时才触发。
万恶的滚轮事件
滚轮事件的支持可谓是乱七八糟，规律如下：
IE6-11 chrome mousewheel wheelDetla 下 -120 上 120
firefox DOMMouseScroll detail 下3 上-3
firefox wheel detlaY 下3 上-3
IE9-11 wheel deltaY 下40 上-40
chrome wheel deltaY 下100 上-100
关于鼠标滚轮事件，IE支持mousewheel，火狐支持DOMMouseScroll。
判断鼠标滚轮是向上还是向下，IE是通过wheelDelta属性，而火狐是通过detail属性
事件委托方法：
//事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
FF：document.body.onload = inject();
HTML5 的浏览器支持情况：
1986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
