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綁定的方法是最好的。

但是如果，直接綁定一些事件監聽函數，並且這些函數只執行一次，就都不再需要，或者是，只要頁面未被卸載，需要一直存在的，那麼還是直接對象的綁定方法更優。