典型的javascript兼容有关问题
日期：2014-05-16 浏览次数：20360 次
//一些常见的兼容性问题，仅供参考
一 nextSibling
<ul>
??? <li id="item1"></li>
??? <li id="item2"></li>
??? <li id="item3"></li>
</ul>
<script type="text/JavaScript">
??? var item1 = document.getElementById("item1");
??? alert(item1.nextSibling.nodeType);
??? alert(document.getElementsByTagName("ul")[0].childNodes.length);
</script>
??
//IE下弹出1和3 表明item1的nextSibling类型为DOM节点，ul里的子节点个数3
//Firefox弹出3和7，表明item1的nextSibling类型为文本节点，ul里的子节点个数7
<script type="text/javascript">
??? function getNextNode(node) {
??????? node = typeof node == "string" ? document.getElementById(node) : node;
??????? var nextNode = node.nextSibling;
??????? if (!nextNode) return null;
??????? if (!document.all) {
??????????? while (true) {
??????????????? if (nextNode.nodeType == 1) {
??????????????????? break;
??????????????? } else {
??????????????????? if (nextNode.nextSibling) {
??????????????????????? nextNode = nextNode.nextSibling;
??????????????????? } else {
??????????????????????? break;
??????????????????? }
??????????????? }
??????????? }
??????? }
??????? return nextNode;
??? }
??? var nextNode = getNextNode("item1");
??? alert(nextNode.id);
??? var nextNode2 = getNextNode("item2");
??? alert(nextNode2.id);
</script>
?
?
二 透明度
IE下透明度是用滤镜实现的，而在Firefox下CSS的opactity属性实现的。
?<style type="text/CSS">
?? ?#test1 {
?? ? ? ?background: blue;
?? ? ? ?height: 100px;
?? ?}
?
?? ?#test2 {
?? ? ? ?background: green;
?? ? ? ?height: 100px;
?? ?}
</style>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/JavaScript">
?? ?function setOpacity(node, level) {
?? ? ? ?node = typeof node == "string" ? document.getElementById(node) : node;
?? ? ? ?if (document.all) {
?? ? ? ? ? ?node.style.filter = 'alpha(opacity=' + level + ')';
?? ? ? ?} else {
?? ? ? ? ? ?node.style.opacity = level / 100;
?? ? ? ?}
?? ?}
?? ?setOpacity("test1", 20);
?? ?setOpacity("test2", 80);
</script>
?
三 event对象
IE下event对象作为window的属性作用于全局的，Firefox中，event对象是作为事件对象的参数存在的。
代码清单 兼容 IE 和 firefox 的 event 对象?
<input id="wrapper" type="button" value="click me"/>
<span id="span">hello world</span>
<script type="text/JavaScript">
?? ?function getEventTarget(e) {
?? ? ? ?// 下面可以用e来做点什么事，e在IE和Firefox下都指向了event对象?
?? ? ? ?e = window.event || e;
?? ? ? ?//?兼容 srcElement 和 target?
?? ? ? ?var host =?e.srcElement || e.target;
?? ? ? ?return?host?;
?? ?}
?? ?document.getElementById("wrapper").onclick = function(e) {
?? ? ? ?var node = getEventTarget(e);
?? ? ? ?alert(node.tagName);
?? ?}
?? ?document.getElementById("span").onclick = function(e) {
?? ? ? ?var node = getEventTarget(e);
?? ? ? ?alert(node.tagName);
?? ?}
</script>
?
// 阻止事件冒泡
<script type="text/JavaScript">
?? ?function stopPropagation(e) {
?? ? ? ?e = window.event || e;
?? ? ? ?if (document.all) { // only for IE
?? ? ? ? ? ?
