|
【獲取背景色】
如果td是背景透明的話顯然不太美觀，最好是找一個(gè)合適的顏色來填充。
程序用的方法是，從當(dāng)前td開始找，如果背景是透明的話，就再從父節(jié)點(diǎn)中找，直到找到有背景色為止。
一般來說透明的屬性值是"transparent"，但在chrome里卻是"rgba(0, 0, 0, 0)"，所以用了一個(gè)屬性來保存透明值：
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;
如果全部都是透明的話就會(huì)返回白色（#fff）。
這里沒有考慮圖片背景的情況，畢竟圖片不一定會(huì)覆蓋整個(gè)背景。
【parentNode/offsetParent/parentElement】
上面用到了parentNode，這里順便說說它跟offsetParent，parentElement的區(qū)別。
先看看parentNode在w3c的說明：
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ǎn)單，就是節(jié)點(diǎn)的父節(jié)點(diǎn)，看過dom都知道。
再看看比較容易區(qū)分的offsetParent，它在mozilla和msdn都說得比較模糊，在w3c就比較清楚了：
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.
這里主要有四點(diǎn)：
- 如果是根元素、body元素或元素的position是fixed，將返回null；
- 如果是area元素，會(huì)返回最接近的map元素；
- 返回至少符合以下一個(gè)條件的最接近該節(jié)點(diǎn)的元素：1，元素的position不是static；2，是body元素；3，源元素的position是static，祖先元素中的以下元素：td，th或table。
- 返回null。
其中第三點(diǎn)是最常見的情況，詳細(xì)可以看下面的測(cè)試：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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標(biāo)準(zhǔn)，后者只ie支持，其他的區(qū)別就不是那么明顯了。
在ie中大部分情況下兩者的效果是一樣的，當(dāng)然如果是一模一樣的話ie就沒必要弄這么一個(gè)東西出來了，測(cè)試下面的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<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>
可以看到當(dāng)父節(jié)點(diǎn)的nodeType不是1，即不是element節(jié)點(diǎn)的話，它的parentElement就會(huì)是null。
這就明白了名字中“Element”的含義了。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 JavaScript Table行定位效果 [3] 下一頁 JavaScript Table行定位效果 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 JavaScript Table行定位效果 [4]
