《精通JavaScript》讀書筆記（四）

1.元素的尺寸

找出元素的的高度和寬度可以很容易，也可以很困難，取決於它所處的不同場合，在大多數情況下，我們只需要利用前面自己封裝的getstyle函式即可，如下所示：

var getheight = function(elem);
var getwidth = function(elem);

但是這樣做會遇到2個問題：其一，需要獲取有預定義高度元素的完整高度。比如，以0畫素開始的動畫，但你需要事先知道元素究竟能有多高或多寬。其二，當元素的display為none的時候，你會得不到這個數值（當display屬性為none時，若未設定height，則通過getstyle函式獲得的height屬性為auto）。在需要執行動畫時這兩個問題就會發生。

經過我的測試，元素display為none時，clientheight、clientwidth、offsetwidth、offsetheight、offsettop為0, offsetwidth在ie8下是-1, 在ff和chrome下是0。

在設計獲得元素的潛在完整尺寸的函式時，我們有必要先弄清楚clientheight、cilentwidth、offsetheight、offsetwidth這幾個屬性的概念：

offsetheight : 元素在垂直方向上占用的空間大小，以畫素記。包括元素的高度、（可見的）垂直滾動條的高度、上內邊距和下內邊距、上邊框高度和下邊框的高度。

clientheight: 元素內容及區高度加上上下內邊距所佔據的大小。

下面的**展示了如何找到元素的潛在的完整高度和寬度。這需要通過訪問clientwidth和clientheight屬性來實現，它們提供了元素可能到達的總尺寸。

/*
*在元素原有的css屬性上修改或新增css屬性
*引數css_obj：要新增或修改的css屬性
*返回值：元素最初的被修改或新增的css屬性值 
*/var resetcss = function(elem, css_obj);
for (var k in css_obj) 
return old;
};/*
*設定元素的相關css屬性，引數與xx.resetcss函式一樣，返回undefined 
*/var setcss = function(elem, css_obj)
};/*
* 獲取元素潛在的完整寬度和高度
*/var getfullheight = function(elem)
//否則，我們重置它的css屬性以獲得更精確的資料
var old = resetcss(elem, );
//使用clientheight找出元素的完整高度，如果不生效，使用getheight函式
var h = elem.clientheight || getheight(elem);
//恢復元素的css屬性
setcss(elem, old);
return h;
};var getfullwidth = function(elem)
var old = xx.resetcss(elem, );
var w = elem.clientwidth || getwdith(elem);
setcss(elem, old);
return w;
};

2. 元素的可見性

下面**展示了使用css的display屬性來切換元素可見性的一組函式：

/*
* 使用display屬性來切換元素可見性的一組函式
*///隱藏元素函式
var hide = function(elem)
elem.style.display = 'none';
};/*顯示元素函式
* 引數type: 要顯示的格式（'block'、'inline'等），
* 若不輸入，則先查詢元素是否有儲存的display屬性，若有，則更改為儲存的display屬性，
* 否則預設為'，此時會清除元素的display屬性，從而繼承樣式表的display屬性，
* 若樣式表display為none，此時元素則不會顯示出來
*/var show = function(elem, type) else
};

3. 動畫

以下**通過在短時間內增加高度或寬度滑動展開元素：

/*
*滑動展開函式：在短時間內增加高度或寬度逐步顯示隱藏元素 
*type: 按何種型別展開（寬度或高度），應輸入'width'或'height'或'both'，預設為'both'
*wvalue:要展開的最終寬度值，預設為元素的潛在完整寬度,若hvalue未輸入，則預設為寬度和高度的值
*hvalue:要展開的最終高度值，預設為元素的潛在完整高度
*/xx.slideopen = function(elem, type, wvalue, hvalue) else
} else if (3 === len) else 
} else 
if('width' === type)
if('both' === type)
} xx.show(elem, 'block');//先顯示元素，但是看不到它，因為元素寬或高為0
for(var i = 0; i <= 100; i += 5)
}, (pos + 1) * 10 );
})();
}};

以下**在短時間內增加透明度逐步顯示隱藏元素的函式：

/*
*調節元素透明度函式(level從0-100) 
*/xx.setopacity = function(elem, level) else
};/*
*讓乙個元素漸顯（通過短時間內逐步增加透明度顯示） 
*/xx.fadein = function(elem), (pos + 1) * 10);
})();
}};

《精通JavaScript》讀書筆記（四）

《精通JavaScript》讀書筆記（五）

精通指令碼黑客2 10 2 11筆記

精通指令碼黑客3 1 3 8筆記

《精通JavaScript》讀書筆記（四）

《精通JavaScript》讀書筆記（五）

精通指令碼黑客2 10 2 11筆記

精通指令碼黑客3 1 3 8筆記

相關推薦