位置：首页>> 网络编程>> JavaScript>> JavaScript Table行定位效果（4）

JavaScript Table行定位效果（4）

作者：cloudgamer　来源：cloudgamer博客　发布时间：2009-05-25 10:47:00　

标签：JavaScript,表格,定位,table

【获取背景色】

如果td是背景透明的话显然不太美观，最好是找一个合适的颜色来填充。

程序用的方法是，从当前td开始找，如果背景是透明的话，就再从父节点中找，直到找到有背景色为止。

一般来说透明的属性值是"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的区别。
先看看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.
很简单，就是节点的父节点，看过dom都知道。

再看看比较容易区分的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.
这里主要有四点：
1，如果是根元素、body元素或元素的position是fixed，将返回null；
2，如果是area元素，会返回最接近的map元素；
3，返回至少符合以下一个条件的最接近该节点的元素：1，元素的position不是static；2，是body元素；3，源元素的position是static，祖先元素中的以下元素：td，th或table。
4，返回null。

其中第三点是最常见的情况，详细可以看下面的测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://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)//bodyalert($("t1").offsetParent)//tdalert($("t2").offsetParent)//tablealert($("t3").offsetParent)//divalert($("t4").offsetParent)//null</script></body></html>

可见offsetParent跟parentNode的区别还是很大的。

而parentNode跟parentElement除了前者是w3c标准，后者只ie支持，其他的区别就不是那么明显了。

在ie中大部分情况下两者的效果是一样的，当然如果是一模一样的话ie就没必要弄这么一个东西出来了，测试下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><script>var o = document.createDocumentFragment().appendChild(document.createElement("div"));alert(o.parentNode)alert(o.parentNode.nodeType)//11alert(o.parentElement)//nullalert(document.body.parentNode)alert(document.body.parentNode.nodeType)//1alert(document.body.parentElement)//htmlalert(document.body.parentNode.parentNode)alert(document.body.parentNode.parentNode.nodeType)//9alert(document.body.parentElement.parentElement)//null</script></body></html>

可以看到当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null。

这就明白了名字中“Element”的含义了。

第一页上一页 2 3

5 6 下一页

投稿

JavaScript Table行定位效果（4）

猜你喜欢