解决跨浏览器问题的几个代码段总结

原文链接：地址

---

Ajax对象：XMLHttpRequest和IE的ActiveX对象

这两种对象的构造函数有两种不同的格式，但却共享了同一种功能和方法。一旦创建完初始的对象并将其赋值给一个对象，也就解决了Ajax的跨浏览器问题。

var xmlhttp = false;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
    xmlhttp.overrideMimeType('text/xml');
}else if(window.ActiveXObject){
    xmlhttp = new ActiveXObject();
}

实例1-Hello Ajax

下面这个就是一个基本的级联的例子，首先获得xmlhttp对象（解决跨浏览器问题），然后发送ajax请求，过程就是open,onreadyStateChange,send。当服务器接收到相应时，就要对相应进行处理，这里就是通过XMLHttpRequest的属性，status=200时表示服务器额的状态一切正常，readyState==4的时候表示响应加载完毕。所以，当一个在请求的就绪状态发生改变时就调用onreadyStateChange，来处理。

var xmlhttp = false;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
    xmlhttp.overrideMimeType('text/xml');
}else if(window.ActiveXObject){
    xmlhttp = new ActiveXObject();
}

function populateList(){
    var state = document.forms[0].elements[0].value;
    var url = "ajax.php?state="+state;
    xmlhttp.open('GET',url,true);
    xmlhttp.onreadyStatechange = getCities;
    xmlhttp.send(null);
}

function getCities(){
    var cities = document.getElementById("cities");
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        cities.innerHTML = "<select>"+xmlhttp.responseText + "<select>";
    }else{
        cities.innerHTML = "Error";
    }
}
populateList();

Ajax也有缺点，这里记录一下：可访问性问题，缺少永久链接问题，浏览历史记录的问题。

---

尝试获取CSS样式信息

如果说就该style样式比较简单，或者style属性就没有那么简单。如果没有通过Javascrip直接设置属性，或者在元素中使用内联的style属性，即使通过样式表来设置style值，style的属性的值也都是undefined。记住这一点很重要，因为在使用DHTML（动态构建网页）很可能会遇到这个问题。

若要访问样式，你需要使用其他属性，每个属性专门用于不同的类型的浏览器。Microsoft和Opera支持currentStyle属性，而Firefox，Mozilla使用window.getComputedStyle。跨浏览器写法可如下：

function getStyle(obj,jsprop,cssprop){
    if(obj.currentStyle){
        return obj.currentStyle[jsprop];
    }else if(window.getComputedStyle){
        return document.defaultView.getComputedStyle(obj,null).getPropertyValue(cssprop);
    }else{
        return null;
    }
}
alert(getStyle(obj,"backgroundColor","background-color"));

看到JAVASCRIPT核心技术上写了这么一段话：
在处理动态DHMTL时，一个很好的经验规则是：努力避免从页面样式设置中直接检索信息，相反，只要可能，就使用程序变量来保持值，只是在设置属性时才使用style。
我对这个程序变量保持值不是很明白。如果大家有理解，可否在地下留下言？谢谢啦。

---

opcity元素透明度跨浏览器解决方案

元素的透明度由它的opacity不透明度的百分比来决定，Microsoft坚持使用alpha滤镜。其他浏览器如Mozilla都决定采用新的css3标准。因为微软的滤镜使用百分比，而不是使用数字型的值，因此在使用IE时，保存当前opacity不透明度的变量应该乘以100。

function adjustOpacity(){
    var img = document.getElementById('img1');
    if(img.style.filter){
        opacity = opacity*100;
        img.style.filter = "alpha(:"+opacity+")";
    }else if(img.style.opacity){
        img.style.opacity = opacity;
    }else {
        alert("Opacity not supported");
    }
}