2009年5月22日 星期五
2009年5月19日 星期二
JavaScript Array內建函數
JavaScript基礎之Array，你精通了嗎？ - iammonster - JavaEye技術網站
一、 學好JavaScript的基礎，Array類是必不可少的，也許你每天都在寫JS，那麼對於Array類，你到底用了多少呢？下面列舉一下Array類內置的方法：
1、構造方法：
Js代碼
1. var a = new Array(); //創建Array對象
2. var a = new Array;//創建Array對象
3. var a = new Array(10);//創建Array對象，並指定數組中項的個數
4.
5. var a = new Array("a","b","c"); //數組a,b,c
6. var a = ["a","b","c"];//數組a,b,c
7.
8. var a =[["a","b","c"],[1,2,3]];//多維數組
var a = new Array(); //創建Array對象
var a = new Array;//創建Array對象
var a = new Array(10);//創建Array對象，並指定數組中項的個數
var a = new Array("a","b","c"); //數組a,b,c
var a = ["a","b","c"];//數組a,b,c
var a =[["a","b","c"],[1,2,3]];//多維數組
2、toString、valueOf
Js代碼
1. //把數組轉化為","號隔開的字符串？很簡單：
2. var a =["a","b","c"];
3. var s = a.toString();
4. alert(s);
5. var s2 = a.valueOf();
6. alert(s2);
//把數組轉化為","號隔開的字符串？很簡單：
var a =["a","b","c"];
var s = a.toString();
alert(s);
var s2 = a.valueOf();
alert(s2);
3、join
Js代碼
1. //厭倦了","號隔開的字符串？那麼：
2. var a =["a","b","c"];
3. var s = a.join("-");//想用什麼隔開呢？在這裡寫吧，當然","也是可以的
4. alert(s);
//厭倦了","號隔開的字符串？那麼：
var a =["a","b","c"];
var s = a.join("-");//想用什麼隔開呢？在這裡寫吧，當然","也是可以的
alert(s);
4、split
Js代碼
1. //反悔了？倒過來把字符串轉化為數組？
2. var s = "a-b-c";
3. var a =s.split("-");
4. alert(a);
//反悔了？倒過來把字符串轉化為數組？
var s = "a-b-c";
var a =s.split("-");
alert(a);
5、concat
Js代碼
1. //用for循環來合併？沒那麼麻煩
2. var a1 = new Array(1,2,3);
3. var a2 = new Array("a","b","c");
4. var a3 = a1.concat(a2);
5. alert(a3);
//用for循環來合併？沒那麼麻煩
var a1 = new Array(1,2,3);
var a2 = new Array("a","b","c");
var a3 = a1.concat(a2);
alert(a3);
6、splice
Js代碼
1. //刪除？很靈活
2. var a1 = new Array(1,2,3);
3. var a2 = new Array("a","b","c");
4. var a3 = a1.concat(a2);
5. alert(a3);
6. var a4 = a3.splice(1,2); //從a3中刪除從下標為1開始的2項,返回刪除的結果給a4
7. alert(a3+" "+a4);
//刪除？很靈活
var a1 = new Array(1,2,3);
var a2 = new Array("a","b","c");
var a3 = a1.concat(a2);
alert(a3);
var a4 = a3.splice(1,2); //從a3中刪除從下標為1開始的2項,返回刪除的結果給a4
alert(a3+" "+a4);
7、push、pop
Js代碼
1. //棧的數據結構要自己來寫？不需要
2. var a1 = new Array(1,2,3);
3. var a2 = a1.push(4); //頂部壓入4，返回壓入的對象
4. alert(a1+" "+a2);
5. var a3 = a1.pop(); //頂部彈出頂部第一個對象，返回彈出對象
6. alert(a1+" "+a3);
//棧的數據結構要自己來寫？不需要
var a1 = new Array(1,2,3);
var a2 = a1.push(4); //頂部壓入4，返回壓入的對象
alert(a1+" "+a2);
var a3 = a1.pop(); //頂部彈出頂部第一個對象，返回彈出對象
alert(a1+" "+a3);
8、shift、unshift
Js代碼
1. //倒轉棧結構？來得更輕鬆
2. var a = new Array(1,2,3);
3. var i1 = a.shift(); //刪除數組的第一項，將其作為函數返回值
4. alert(i1+" "+a);
5. var i2 = a.unshift(1); //加入一項放在數組的第一個位置，原來的項分別往下移一個位置
6. alert(i2+" "+a);
//倒轉棧結構？來得更輕鬆
var a = new Array(1,2,3);
var i1 = a.shift(); //刪除數組的第一項，將其作為函數返回值
alert(i1+" "+a);
var i2 = a.unshift(1); //加入一項放在數組的第一個位置，原來的項分別往下移一個位置
alert(i2+" "+a);
9、sort,reverse
Js代碼
1. //排序？簡單，但是它是按照字符串排序的哦儘管是數字
2. var a = new Array(1,2,6,3,9,5,7);
3. a.sort();
4. alert(a);
5. var a = new Array(1,2,6,3,9,5,27);//注意這裡排序會讓你意外哦[1,2,27,3,5,6,9]
6. a.sort();
7. alert(a);
8. //想倒序？
9. a.reverse();
10. alert(a);
//排序？簡單，但是它是按照字符串排序的哦儘管是數字
var a = new Array(1,2,6,3,9,5,7);
a.sort();
alert(a);
var a = new Array(1,2,6,3,9,5,27);//注意這裡排序會讓你意外哦[1,2,27,3,5,6,9]
a.sort();
alert(a);
//想倒序？
a.reverse();
alert(a);
10、再論splice
Js代碼
1. //第6條中已經說明了它的刪除功能，它還能插入、替換
2. var a =["a","d","e"];
3. a.splice(1,0,'b','c'); //在位置1（即d）處刪除0個項，並插入['b','c']，即插入
4. alert(a);
5. a.splice(3,2,'dd','ee'); //在位置3處刪2個項，並插入['dd','ee'],即替換
6. alert(a);
//第6條中已經說明了它的刪除功能，它還能插入、替換
var a =["a","d","e"];
a.splice(1,0,'b','c'); //在位置1（即d）處刪除0個項，並插入['b','c']，即插入
alert(a);
a.splice(3,2,'dd','ee'); //在位置3處刪2個項，並插入['dd','ee'],即替換
alert(a);
二、再看看判斷一個對象是否為Array對象的方法
Js代碼
1. isArray: function(object) {
2. return object != null && typeof object == "object" &&
3. 'splice' in object && 'join' in object;
4. }
isArray: function(object) {
return object != null && typeof object == "object" &&
'splice' in object && 'join' in object;
}
這個是抄襲prototype的，看看吧，對象不為空且對像類型為object且該對象有splice方法和join方法。也對對你有所啟發，畢竟JS有它的特色。
一、 學好JavaScript的基礎，Array類是必不可少的，也許你每天都在寫JS，那麼對於Array類，你到底用了多少呢？下面列舉一下Array類內置的方法：
1、構造方法：
Js代碼
1. var a = new Array(); //創建Array對象
2. var a = new Array;//創建Array對象
3. var a = new Array(10);//創建Array對象，並指定數組中項的個數
4.
5. var a = new Array("a","b","c"); //數組a,b,c
6. var a = ["a","b","c"];//數組a,b,c
7.
8. var a =[["a","b","c"],[1,2,3]];//多維數組
var a = new Array(); //創建Array對象
var a = new Array;//創建Array對象
var a = new Array(10);//創建Array對象，並指定數組中項的個數
var a = new Array("a","b","c"); //數組a,b,c
var a = ["a","b","c"];//數組a,b,c
var a =[["a","b","c"],[1,2,3]];//多維數組
2、toString、valueOf
Js代碼
1. //把數組轉化為","號隔開的字符串？很簡單：
2. var a =["a","b","c"];
3. var s = a.toString();
4. alert(s);
5. var s2 = a.valueOf();
6. alert(s2);
//把數組轉化為","號隔開的字符串？很簡單：
var a =["a","b","c"];
var s = a.toString();
alert(s);
var s2 = a.valueOf();
alert(s2);
3、join
Js代碼
1. //厭倦了","號隔開的字符串？那麼：
2. var a =["a","b","c"];
3. var s = a.join("-");//想用什麼隔開呢？在這裡寫吧，當然","也是可以的
4. alert(s);
//厭倦了","號隔開的字符串？那麼：
var a =["a","b","c"];
var s = a.join("-");//想用什麼隔開呢？在這裡寫吧，當然","也是可以的
alert(s);
4、split
Js代碼
1. //反悔了？倒過來把字符串轉化為數組？
2. var s = "a-b-c";
3. var a =s.split("-");
4. alert(a);
//反悔了？倒過來把字符串轉化為數組？
var s = "a-b-c";
var a =s.split("-");
alert(a);
5、concat
Js代碼
1. //用for循環來合併？沒那麼麻煩
2. var a1 = new Array(1,2,3);
3. var a2 = new Array("a","b","c");
4. var a3 = a1.concat(a2);
5. alert(a3);
//用for循環來合併？沒那麼麻煩
var a1 = new Array(1,2,3);
var a2 = new Array("a","b","c");
var a3 = a1.concat(a2);
alert(a3);
6、splice
Js代碼
1. //刪除？很靈活
2. var a1 = new Array(1,2,3);
3. var a2 = new Array("a","b","c");
4. var a3 = a1.concat(a2);
5. alert(a3);
6. var a4 = a3.splice(1,2); //從a3中刪除從下標為1開始的2項,返回刪除的結果給a4
7. alert(a3+" "+a4);
//刪除？很靈活
var a1 = new Array(1,2,3);
var a2 = new Array("a","b","c");
var a3 = a1.concat(a2);
alert(a3);
var a4 = a3.splice(1,2); //從a3中刪除從下標為1開始的2項,返回刪除的結果給a4
alert(a3+" "+a4);
7、push、pop
Js代碼
1. //棧的數據結構要自己來寫？不需要
2. var a1 = new Array(1,2,3);
3. var a2 = a1.push(4); //頂部壓入4，返回壓入的對象
4. alert(a1+" "+a2);
5. var a3 = a1.pop(); //頂部彈出頂部第一個對象，返回彈出對象
6. alert(a1+" "+a3);
//棧的數據結構要自己來寫？不需要
var a1 = new Array(1,2,3);
var a2 = a1.push(4); //頂部壓入4，返回壓入的對象
alert(a1+" "+a2);
var a3 = a1.pop(); //頂部彈出頂部第一個對象，返回彈出對象
alert(a1+" "+a3);
8、shift、unshift
Js代碼
1. //倒轉棧結構？來得更輕鬆
2. var a = new Array(1,2,3);
3. var i1 = a.shift(); //刪除數組的第一項，將其作為函數返回值
4. alert(i1+" "+a);
5. var i2 = a.unshift(1); //加入一項放在數組的第一個位置，原來的項分別往下移一個位置
6. alert(i2+" "+a);
//倒轉棧結構？來得更輕鬆
var a = new Array(1,2,3);
var i1 = a.shift(); //刪除數組的第一項，將其作為函數返回值
alert(i1+" "+a);
var i2 = a.unshift(1); //加入一項放在數組的第一個位置，原來的項分別往下移一個位置
alert(i2+" "+a);
9、sort,reverse
Js代碼
1. //排序？簡單，但是它是按照字符串排序的哦儘管是數字
2. var a = new Array(1,2,6,3,9,5,7);
3. a.sort();
4. alert(a);
5. var a = new Array(1,2,6,3,9,5,27);//注意這裡排序會讓你意外哦[1,2,27,3,5,6,9]
6. a.sort();
7. alert(a);
8. //想倒序？
9. a.reverse();
10. alert(a);
//排序？簡單，但是它是按照字符串排序的哦儘管是數字
var a = new Array(1,2,6,3,9,5,7);
a.sort();
alert(a);
var a = new Array(1,2,6,3,9,5,27);//注意這裡排序會讓你意外哦[1,2,27,3,5,6,9]
a.sort();
alert(a);
//想倒序？
a.reverse();
alert(a);
10、再論splice
Js代碼
1. //第6條中已經說明了它的刪除功能，它還能插入、替換
2. var a =["a","d","e"];
3. a.splice(1,0,'b','c'); //在位置1（即d）處刪除0個項，並插入['b','c']，即插入
4. alert(a);
5. a.splice(3,2,'dd','ee'); //在位置3處刪2個項，並插入['dd','ee'],即替換
6. alert(a);
//第6條中已經說明了它的刪除功能，它還能插入、替換
var a =["a","d","e"];
a.splice(1,0,'b','c'); //在位置1（即d）處刪除0個項，並插入['b','c']，即插入
alert(a);
a.splice(3,2,'dd','ee'); //在位置3處刪2個項，並插入['dd','ee'],即替換
alert(a);
二、再看看判斷一個對象是否為Array對象的方法
Js代碼
1. isArray: function(object) {
2. return object != null && typeof object == "object" &&
3. 'splice' in object && 'join' in object;
4. }
isArray: function(object) {
return object != null && typeof object == "object" &&
'splice' in object && 'join' in object;
}
這個是抄襲prototype的，看看吧，對象不為空且對像類型為object且該對象有splice方法和join方法。也對對你有所啟發，畢竟JS有它的特色。
三、一些有用的擴展：
- input type="button" value="測試獲取數組下標" onclick="testIndexOf()"
-
- --scrip--
-
- // use native browser JS 1.6 implementation if available
- if (!Array.prototype.indexOf) Array.prototype.indexOf = function(item, i) {
- i || (i = 0);
- var length = this.length;
- if (i < 0) i = length + i;
- for (; i < length; i++)
- if (this[i] === item) return i;
- return -1;
- };
- function testIndexOf()
- {
- var a =[1,2,3];
- alert(a.indexOf(2));
- }
上面的舉例獲取數組中某項的下標，還有像：把數組裡的項唯一化(uniq)、最後一個位置(lastIndexOf)等等，你都可以擴展。並且你可以借鑑prototype的庫，mootools的庫等等，裡面的有些寫法很是經典，可以學習學習。
四、要干活了，不再囉嗦：
上面囉嗦了一堆，想說明的不外乎兩點：1、注重JS基礎，別雲裡來霧裡去；2、學習經典庫的寫法，借鑑總是能幫你少走一些彎路，但是走走彎路也是挺好好處，自己掂量掂量吧。
2009年5月15日 星期五
javascript 數字相加 變成 文字相加？
javascript數字相加怪問題
或是
var a = 3;
var b = 98
c = a + b
想得到c=101
確變成了字符串拼接，得到了398
我該則麼做呢？
請先進行類型轉換
c = parseInt(a) + parseInt(b)
或是
c = a-0 + b-0;
PHP 分割字串 Function 的速度比較(substr/sscanf/preg_match)
PHP 分割字串 Function 的速度比較(substr/sscanf/preg_match)
固定長度的字串(假設是 06481a63041b578d702f159f520847f8), 要照固定格式做切割, 使用 PHP 要怎麼切會比較快?
註: 要將此字串切成 => 06 / 48 / 1a63041b578d702f159f520847f8 這三個字串.
寫簡單的程式做個測試, 來比較 substr / sscanf / preg_match 的速度.
先設 $a = '06481a63041b578d702f159f520847f8';, 再執行下面程式做測試(全部都跑 100萬次的數據):
- 使用 substr 程式執行花 4.08482551575 秒:
$x[0] = substr($a, 0, 2);
$x[1] = substr($a, 2, 2);
$x[2] = substr($a, 4, 28); - 使用 sscanf 程式執行花 5.26213645935 秒 (與 substr 差 -5.26213645935)
list($x[0], $x[1], $x[2]) = sscanf($a, '%2s%2s%28s');
註: $x = sscanf($a, '%2s%2s%28s'); // 耗費時間增加到 8秒, 會比 preg_match 更慢. - 使用 preg_match 程式執行花 7.58504867554 秒 (與 substr 差: -7.58504867554)
preg_match('/^(\w{2})(\w{2})(\w{28})$/', $a, $match);
$x[0] = $match[1];
$x[1] = $match[2];
$x[2] = $match[3];
結論, substr() 大獲全勝, 還是不要懶惰, 雖然要寫比較多行, 但是速度會快不少.
2009年5月14日 星期四
width and height
width and height
網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被捲去的高：document.body.scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關於窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在 IE下需要深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標籤。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
[JS] 一堆 width / height
在寫 JavaScript 時最煩的就是計算畫面或是頁面的大小，但是每家瀏覽器提供的內容都不太一樣，所以我就針對幾個瀏覽器（IE, Firefox, Safari, Opera）共同支援的 attr 來寫個簡單的 cheat sheet：
* document.body.client{Width, Height}
用來取得目前瀏覽器視窗內頁面區域的 width, height，也就是不含工具列的部份。
* document.body.offset{Width, Height}
IE, Opera, Safari: 瀏覽器可視區域大小（同 clientWidth）。
FF: body 的大小，若無特別指定，寬會隨著瀏覽器的可視區域更改。
* document.body.scroll{Width, Height}
IE: body 的大小，若無特別指定，寬會隨著瀏覽器的可視區域更改。
FF, Opera, Safari: 若可視區域 小於 body 大小，則是 body 大小，否則是可視區域大小。
* document.documentElement.client{Width, Height}
IE: (0, 0)
FF, Opera, : body 的大小。
Safari: 可視區域大小。
* document.documentElement.offset{Width, Height}
IE, Safari: 可視區域大小。
FF, Opera: body 大小。
* document.documentElement.scroll{Width, Height}
IE: 可視區域大小。
FF, Opera, Safari: 同 document.body.scroll{Width, Height}
網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被捲去的高：document.body.scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關於窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在 IE下需要深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標籤。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
[JS] 一堆 width / height
在寫 JavaScript 時最煩的就是計算畫面或是頁面的大小，但是每家瀏覽器提供的內容都不太一樣，所以我就針對幾個瀏覽器（IE, Firefox, Safari, Opera）共同支援的 attr 來寫個簡單的 cheat sheet：
* document.body.client{Width, Height}
用來取得目前瀏覽器視窗內頁面區域的 width, height，也就是不含工具列的部份。
* document.body.offset{Width, Height}
IE, Opera, Safari: 瀏覽器可視區域大小（同 clientWidth）。
FF: body 的大小，若無特別指定，寬會隨著瀏覽器的可視區域更改。
* document.body.scroll{Width, Height}
IE: body 的大小，若無特別指定，寬會隨著瀏覽器的可視區域更改。
FF, Opera, Safari: 若可視區域 小於 body 大小，則是 body 大小，否則是可視區域大小。
* document.documentElement.client{Width, Height}
IE: (0, 0)
FF, Opera, : body 的大小。
Safari: 可視區域大小。
* document.documentElement.offset{Width, Height}
IE, Safari: 可視區域大小。
FF, Opera: body 大小。
* document.documentElement.scroll{Width, Height}
IE: 可視區域大小。
FF, Opera, Safari: 同 document.body.scroll{Width, Height}
訂閱：
文章 (Atom)