display的问题

说说display的取值问题：

直接说问题吧：

第一种情况：

<div1 id = "div1"></div1>
<style>
#div1{
	display:none;
	width:100px;
}
</style>
var display = document.getElementById("div1").style.display; //;
var width = document.getElementById("div1").style.width; //;

各种浏览器的结果，display都是空，至于width则为一个空值。

第二种情况：

<div1 id = "div1" style = "display:none;width:100px;"></div1>
var display = document.getElementById("div1").style.display; //none;
var width = document.getElementById("div1").style.width; //100px;

各浏览器的结果，display都是none，至于width都是100px。

在上面的两种情况下，#div1的层叠之后的样式是：

而浏览器上面的显示也是处于display=none的状态。
但在以对象取值的结果，取值的最后结果，却是为空。
说明，这种直接对象取值方式，无法取到层叠之后的样式。

并且，执行document.getElementById("div1").style.display = "block";语句之后，会在id=div1的div的行内生成一个属性style = "display:block;",
这也说明，这种对象的直接量是对元素的行内属性操作的。

所以，如果需要计算层叠之后的效果，又想要用js源码实现的话，就加上js源码中计算层叠样式的代码吧

oDiv=document.getElementById("div1");
var display="";
if(document.defaultView&&document.defaultView.getComputedStyle){
display=document.defaultView.getComputedStyle(oDiv).display;
}else{
display=oDiv.currentStyle.display;
}

说到对元素的属性操作，不得不说一下dom的属性操作的方法

第一种：

<div1 id = "div1"></div1>
<style>
#div1{
	display:none;
	width:100px;
}
</style>
var domstyle = document.getElementById("div1").getAttribute("style");
console.log("domstyle="+domstyle+";domstyletype="+(typeof domstyle));

这个的结果在ie下是有些许差别的
ie7(含ie7)下：domstyle=[object];domstyletype=object
ie8+和其他浏览器下：domstyle=null;domstyletype=object

第二种：

<div1 i = "div1" style = "display:none;width:100px;"></div1>
var domstyle = document.getElementById("div1").getAttribute("style");
console.log("domstyle="+domstyle+";domstyletype="+(typeof domstyle));

这个的结果在ie下是有些许差别就比第一种差距稍大。
ie7(含ie7)下：domstyle=[object];domstyletype=object
ie8+和其他浏览器下：domstyle=display:none;width:100px;;domstyletype=string 
返回值的类型一个为object，一个为string。
如果在开发中，涉及到这种情况，麻烦一点，分开处理吧。一个按对象处理，一个按照字符串处理。

说到这里，不得不说另外的一个css取值的方法，该方法只能取得行内样式
var csstext = document.getElementById("div1").style.cssText;
该方法既可以给元素赋值，也可以给取出元素的行内样式。

下面对三种获取元素css样式的方法对比一下：因为js的操作，基本都是在操作元素的行内样式，所以在这里只考虑元素的行内样式。

1：在行内样式表为空时：
取值是：domstyle=null;csstext=;display=[object CSSStyleDeclaration];
其type：domstyletype=object;typeoftext=string;displaytype=object;
 
2：在行内样式表不为空时：
取值：domstyle=display: none;csstext=display: none;display=[object CSSStyleDeclaration];
其type：domstyletype=string;csstexttypeof=string;displaytype=object;

不过在ie7(含ie7)之下，
domstyle=[object];domstyletype=object;display=[object];displaytype=object 
可以发现，dom取值和直接对象取值的结果，对比其他浏览器，都是有差别的，为cssText方法，却是完全相同的。
所以，csstext的方法，是最有效的兼容各浏览器的操作行内样式表的方法，并且这个方法，可以一次给元素添加多个css属性，又减少可能会导致的页面重绘或回流，更优！

既然说到了dom取值的属性问题，那么就再多说下其他的元素属性，利用dom和对象方法取值的差别。
一般来说，每个元素的属性，都可以分为一般属性，和事件属性。

先说一下一般属性吧

如果查询的属性不存在：

<div id="div1"></div>
var dom = document.getElementById("div1").getAttribute("class");
var jsob = document.getElementById("div1").className;

这个时候，大家都比较统一，返回结果是：(包括ie的各个版本)
dom:null;domType:object;
jsob:;jsobtype:string;

如果查询的结果存在，就有些区别了。

<div id="div1" class = "domtest"></div>
var dom = document.getElementById("div1").getAttribute("class");
var jsob = document.getElementById("div1").className;

ie7(含ie7)很是专一，返回结果依然是：
dom:null;domType:object;

jsob:domtest;jsobtype:string;

2013.11.10补充：其实，在ie7之下取值不到的情况，并不是说有兼容问题，只是因为class属性太过特殊了，直接对象的取值，就使用的className取值的。

在这里，也是这个原因，在ie7下，dom的class取值也是需要"className"的，这样getAttribute("className");

这就使得dom操作的复杂性变了，所以，不如直接对象取值统一，都是以className取值的，不需要考虑，是在哪个浏览器之下。

这样不是方便很多。

ie8+和其他浏览器，则会按照真实的情况返回结果:
dom:domtest;domType:string;
jsob:domtest;jsobtype:string;


所以对于元素的自带的属性，都可以利用上面的两种方法进行取值，并且由上面的结论可以看出，除了style属性例外，其他自带属性(一般包括id,class(对象取值用className),title,dir,lang等)，利用直接对象取值赋值，更为统一，不需要考虑浏览器的兼容问题。

不过对于一些你开发者自定义的属性，是不能用直接对象取值赋值的，必须用dom方法才能进行取值赋值：例：

<div id="div1" tar = "domtest"></div>
jsob = document.getElementById("div1").tar;
dom = document.getElementById("div1").getAttribute("tar");

jsob:undefined;jsobtype:undefined
dom:domtest;domType:string

不过也总有例外的时候，比如ie7(含ie7)下的版本，自定义的属性，也可以通过对象的方法操作，结果就是这样：
jsob:domtest;jsobtype:string


所以呢，对于元素中，自定义的属性，那么为了浏览器的兼容问题，
还是老老实实的用dom操作吧，省的又要考虑之后会不会出现兼容问题。


看看前面说的，再总结一下，看着好像很乱的样子：
style属性的操作最优方法是直接对象中利用style属性的cssText；
其他元素自带一般属性的操作方法是直接对象的方法；
元素的自定义属性的最优操作方法是dom方法。


这才只是一般属性，就分了这么几类了，那对于事件属性会有什么情况出现呢？

事件的绑定大体可以分为三种方式：好像跟属性的设置差不多的
1：直接在元素上面绑定
2.直接对象的绑定
3.dom方法绑定


想到一个问题，事件属性只是为了执行一段js代码，好像没有必要研究下它的值和类型。就不在这里列举了，不过，各种方法，在各种浏览器下的值和类型是不同的，如果遇到这种情况，又找不到问题，可以试试是不是这个方面的问题了。


三种事件的绑定方法，第一种是最差的，因为嵌入在html代码中了，没有分离，对蜘蛛的吸引力就降低了，其他两种方法，都还不错。


至于绑定多个事件的执行顺序：
第一种：直接在元素上绑定，按顺序执行。(各浏览器都支持)
第二种：只能绑定一个，因为这个的实质是赋值的语句，最后一个被赋值的有效。
第三种：ie7(含ie7)之下，反序执行，其他按照顺序执行。


就说这么多吧，如果你发现文中有什么问题，欢迎指正，让大家共同进步。

注：补充一下事件的兼容问题：2013.12.12

1：事件触发分为：捕获和冒泡。       //  现在多数采用的冒泡。

2：dom方法绑定：w3c的事件只要事件名即可，ie7- 的需要添加前缀on;

3：dom方法绑定：若绑定多个事件监听函数，则在 ie7-  浏览器，监听函数按绑定顺序逆序执行，this执行window，可以重复绑定同一个事件，其他浏览器，顺序执行，this指向被绑定事件的元素，不会重复绑定同一事件。

4：直接对象的绑定方法，不可以绑定多个事件监听函数，因为这个方法本质上，是一个赋值表达式，所以，后面的绑定会覆盖掉前面的绑定。

5：dom方法绑定：无法解除匿名函数的绑定，直接对象的绑定方法，可以通过赋空值解除绑定。

6：....

个人感觉，如果需要绑定多个事件监听函数，并且这些个事件监听函数，其中有的函数会在某些条件下要解除绑定，那么dom绑定的方法是最好的。

但是如果，直接绑定一些事件监听函数，并且这些函数只执行一次，就都不再需要，或者是，只要页面未被卸载，需要一直存在的，那么还是直接对象的绑定方法更优。