【獲取背景色】
如果td是背景透明的話顯然不太美觀，最好是找一個合適的顏色來填充。
程序用的方法是，從當前td開始找，如果背景是透明的話，就再從父節(jié)點中找，直到找到有背景色為止。
一般來說透明的屬性值是"transparent"，但在chrome里卻是"rgba(0, 0, 0, 0)"，所以用了一個屬性來保存透明值：
this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent";
并在GetBgColor獲取背景色程序中使用：
while (bgc == this._transparent && (node = node.parentNode) != document) {
bgc = CurrentStyle(node).backgroundColor;
}
return bgc == this._transparent ? "#fff" : bgc;
如果全部都是透明的話就會返回白色（#fff）。
這里沒有考慮圖片背景的情況，畢竟圖片不一定會覆蓋整個背景。
【parentNode/offsetParent/parentElement】
上面用到了parentNode，這里順便說說它跟offsetParent，parentElement的區(qū)別。
先看看的說明：
The parent of this node. All nodes, except Document, DocumentFragment, and Attr may have a parent. However, if a node has just been created and not yet added to the tree, or if it has been removed from the tree, this is null.
很簡單，就是節(jié)點的父節(jié)點，看過dom都知道。
再看看比較容易區(qū)分的offsetParent，它在mozilla和msdn都說得比較模糊，在就比較清楚了：
The offsetParent attribute, when called on element A, must return the element determined by the following algorithm:
1，If any of the following holds true return null and stop this algorithm:
A is the root element.
A is the HTML body element.
The computed value of the position property for element A is fixed.
2，If A is an area HTML element which has a map HTML element somewhere in the ancestor chain return the nearest ancestor map HTML element and stop this algorithm.
3，Return the nearest ancestor element of A for which at least one of the following is true and stop this algorithm if such an ancestor is found:
The computed value of the position property is not static.
It is the HTML body element.
The computed value of the position property of A is static and the ancestor is one of the following HTML elements: td, th, or table.
4，Return null.
這里主要有四點：
1，如果是根元素、body元素或元素的position是fixed，將返回null；
2，如果是area元素，會返回最接近的map元素；
3，返回至少符合以下一個條件的最接近該節(jié)點的元素：1，元素的position不是static；2，是body元素；3，源元素的position是static，祖先元素中的以下元素：td，th或table。
4，返回null。
其中第三點是最常見的情況，詳細可以看下面的測試：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<table width="100" id="t">
<tr>
<td><div id="t1"></div></td>
<td id="t2"><div style="position:absolute;">
<div id="t3"></div>
</div></td>
</tr>
</table>
<div id="t4" style="position:fixed;"></div>
<script>
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
alert($("t").offsetParent)//body
alert($("t1").offsetParent)//td
alert($("t2").offsetParent)//table
alert($("t3").offsetParent)//div
alert($("t4").offsetParent)//null
</script>
</body>
</html>
可見offsetParent跟parentNode的區(qū)別還是很大的。
而parentNode跟parentElement除了前者是w3c標準，后者只ie支持，其他的區(qū)別就不是那么明顯了。
在ie中大部分情況下兩者的效果是一樣的，當然如果是一模一樣的話ie就沒必要弄這么一個東西出來了，測試下面的代碼：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<script>
var o = document.createDocumentFragment().appendChild(document.createElement("div"));
alert(o.parentNode)
alert(o.parentNode.nodeType)//11
alert(o.parentElement)//null
alert(document.body.parentNode)
alert(document.body.parentNode.nodeType)//1
alert(document.body.parentElement)//html
alert(document.body.parentNode.parentNode)
alert(document.body.parentNode.parentNode.nodeType)//9
alert(document.body.parentElement.parentElement)//null
</script>
</body>
</html>
可以看到當父節(jié)點的不是1，即不是element節(jié)點的話，它的parentElement就會是null。
這就明白了名字中“Element”的含義了。
【設置td寬度】
接下來就要設置td寬度了，要獲取某元素的寬度可以通過以下方法：
1，支持defaultView的可以直接用getComputedStyle獲取width。
2，獲取offsetWidth，再減去border和padding的寬度。
這個本來也可以，但td的border寬度的獲取比較麻煩，下面有更方便的方法。
3，獲取clientWidth，再減去padding的寬度。
這個跟方法2差不多，但更簡單方便。
注意ie的currentStyle不像getComputedStyle能獲取準確值，而只是一個設置值，像百分比、auto這些并不會自動轉(zhuǎn)成準確值，即使是得到準確值也不一定是實際值，像td即使設置一個很大的準確值，實際值也不會超過table本身的寬度。
所以在td這種比較特殊的結(jié)構(gòu)中，除非是很理想的狀況，否則用currentStyle基本沒戲，而且在這個效果中即使是差了1px也會看不舒服。
對于支持defaultView的當然可以直接獲取，否則就用上面的方法3來獲?。?/p>
style.width = (document.defaultView ? parseFloat(css.width)
: (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px";
但這里不管哪個方法都有一個問題，就是出現(xiàn)scroll的情況，不過還好td這個元素即使設置了overflow為scroll也不會出現(xiàn)滾動條，除了ie8和chrome。
程序沒對這個情況做處理，畢竟給td設scroll也不常見，而且支持這個的瀏覽器不多，沒必要花太多時間在這里。
ps：關(guān)于td寬度的自動調(diào)整可以參考。
如果有影響原td結(jié)構(gòu)的設置，例如colspan之類的就要留意，錯誤的結(jié)構(gòu)很可能導致一些異常變形。
如果對原表格結(jié)構(gòu)或內(nèi)容做了修改，應該執(zhí)行一次Clone方法重構(gòu)新table。
本部分對體驗比較重要，如果設置不當就會有變形的感覺，很不美觀。
【borderCollapse】
上面說到td的border寬度的獲取比較麻煩，那到底有多煩呢？
如果只是一般情況的話，通過borderLeftWidth和borderRightWidth獲取寬度就可以了。
ps：如果borderStyle是"none"的話，那么border就會沒效，所以如果要取border寬度的話最好先判斷一下borderStyle是不是"none"。
但table有一個特別的樣式borderCollapse，設置table的邊框模型。
它有兩個值，分別是separate（分開，默認值）和collapse（合并）。
separate就是我們一般看到的效果，這里主要討論collapse，先看怎么說的：
In the collapsed border model, adjacent table cells share borders.
意思是在collapse border模型中，相鄰的td會共用邊框?？聪旅娴睦訒靼祝?/p>
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<style type="text/css">
.t{line-height:40px;width:200px; }
.t td{border:5px solid #999;}
</style>
<table class="t" style="border-collapse:collapse;">
<tr>
<td width="50"> </td>
<td style="border-left-width:10px; border-left-style:dotted;"> </td>
<td width="50"> </td>
</tr>
</table>
<table class="t">
<tr>
<td width="50"> </td>
<td style="border-left-width:10px; border-left-style:dotted;"> </td>
<td width="50"> </td>
</tr>
</table>
</body>
</html>
可以看到使用collapse之后，相鄰td的邊框都合并成一條而且是以相鄰邊框中寬度較大的那條為準。
那td跟table之間呢，參考下面的例子：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<style type="text/css">
.t{line-height:40px;width:200px;border-collapse:collapse;}
.t td{border:5px solid #999;}
</style>
<table class="t" id="t1">
<tr>
<td width="50" style="border-left:10px dotted #999;"> </td>
<td> </td>
<td width="50"> </td>
</tr>
</table>
<br />
<table class="t" id="t2" style="border-left:10px dotted #999;">
<tr>
<td width="50"> </td>
<td> </td>
<td width="50"> </td>
</tr>
</table>
</body>
</html>
可見table和td之間也是遵從同樣規(guī)則。
還有的是當設置了collapse那cellspacing就無效了。順便說說border-spacing，它其實就是cellspacing在css中的樣式形式，只是ie在ie8才開始支持，詳細可以看。
collapse的一個常見應用是做邊框表格，例如1px邊框的表格：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<style type="text/css">
.t{line-height:40px;width:200px;}
.t1{border-collapse:collapse;}
.t1 td{border:1px solid #999;}
.t2{background-color:#999;}
.t2 td{background-color:#FFF;}
</style>
<table class="t t1">
<tr>
<td width="50"> </td>
<td> </td>
<td width="50"> </td>
</tr>
</table>
<table class="t t2" cellspacing="1">
<tr>
<td width="50"> </td>
<td> </td>
<td width="50"> </td>
</tr>
</table>
</body>
</html>
前者用的collapse，后者是用table背景色模擬，雖然效果都一樣，但前者顯然較好，才是真正的“邊框”。
在使用了collapse之后，要寫一個通用的獲取邊框?qū)挾瘸绦驎兊檬致闊?，而且有些情況下甚至沒辦法判斷獲取。
詳細情況這里就不細說了，有興趣研究的話可以看看，當然要想全部了解的話還要在各個瀏覽器中研究。
【元素位置】
table的樣式設置好后，還需要獲取原table和原tr的位置參數(shù)，為后面的元素定位做準備。
要獲取某個元素相對文檔的位置，傳統(tǒng)的做法是獲取對象的offsetLeft/offsetTop，然后不斷獲取offsetParent的offsetLeft/offsetTop，直到找不到offsetParent為止。
得到的結(jié)果就是相對文檔的位置了，上面已經(jīng)介紹過offsetParent，原理應該都明白了吧。
程序的SetRect設置區(qū)域?qū)傩苑椒ㄖ幸彩褂昧诉@個思路：
Code
//獲取原table位置
var o = this._oTable, iLeft = o.offsetLeft, iTop = o.offsetTop;
while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; }
this._oTableLeft = iLeft;
this._oTableTop = iTop;
this._oTableBottom = iTop + this._oTableHeight;
//獲取原tr位置
o = this._oRow; iTop = o.offsetTop;
while (o.offsetParent) { o = o.offsetParent; iTop += o.offsetTop; }
this._oRowTop = iTop;
this._oRowBottom = iTop + this._oRow.offsetHeight;
不過這里介紹一個更好的方法，通過getBoundingClientRect方法來獲取。
在是這么說明的：
The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport...
返回一個TextRectangle對象，包含left, top, right和bottom幾個只讀屬性，以px為單位來表示邊界框相對視窗左上角的位置。（偶英文爛啊）
注意是相對視窗，不是文檔哦，如果要相對文檔還必須加上scrollLeft/scrollTop。
通過下面的測試可以看到兩個方法返回的結(jié)果都是相同的：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<body>
<style type="text/css">
.t{line-height:40px;width:200px; border:10px solid; margin-top:900px; margin-left:500px;}
</style>
<div class="t" id="t"></div>
<script>
var o = document.getElementById("t");
var rect = o.getBoundingClientRect();
var iLeft1 = rect.left + document.documentElement.scrollLeft, iTop1 = rect.top + document.documentElement.scrollTop;
var iLeft2 = o.offsetLeft, iTop2 = o.offsetTop;
while (o.offsetParent) { o = o.offsetParent; iLeft2 += o.offsetLeft; iTop2 += o.offsetTop; }
alert(iLeft1+"_"+iLeft2)
alert(iTop1+"_"+iTop2)
</script>
</body>
</html>
程序中如果支持getBoundingClientRect就會用它來獲取位置參數(shù)：
Code
//用getBoundingClientRect獲取原table位置
var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect();
this._oTableLeft = rect.left + this._doc.scrollLeft;
this._oTableTop = rect.top + top;
this._oTableBottom = rect.bottom + top;
//獲取原tr位置
rect = this._oRow.getBoundingClientRect();
this._oRowTop = rect.top + top;
this._oRowBottom = rect.bottom + top;
顯然用getBoundingClientRect更方便快捷。
這個方法雖然是ie的產(chǎn)物，但已經(jīng)是w3c的標準，而且ff3和Opera都已經(jīng)支持了這個方法，基本可以放心使用，除了chrome。
這里只是簡單介紹，想了解更多可以看。
獲取原table和tr的位置后，還需要計算新table的位置。
程序可以自定義新table位于視窗位置的百分比，例如頂部是0，中間是0.5，底部是1，可以在程序初始化時或用SetPos方法來設置。
這里主要獲取視窗高度和新table在視窗的top值：
this._viewHeight = document.documentElement.clientHeight;
this._ntViewTop = (this._viewHeight - this._nTableHeight) * this._pos;
定位范圍實際上是從視框頂部到視框高度減去新table高度的范圍內(nèi)的，所以計算時要先把視窗高度減去新table的高度。
標簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：博客園
金喜正規(guī)買球 
110次
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線