在我们模板设计的过程中，不免有很多操作要用到js来实现。例如在鼠标点击超链接后，改变链接的样式，或者是为链接加上滑动门效果...这些效果的实现都是通过js的document.getElementById或getElementsByTagName 方法找到操作的html元素，然后为其设置setAttribute属性。如:Element.setAttribute("Style","display:none;");

但是当设置了setAttribute属性后，会产生在火狐上和IE8上可以正常显示效果，但是在IE7上却看不到任何变化。这样的原因是setAttribute属性在浏览器上存在兼容性问题。并不是说IE7不支持setAttribute这个函数，而是不支持用setAttribute设置某些样式属性，例如对象属性、集合属性、事件属性，也就是说用setAttribute设置style和onclick这些属性在IE7中是行不通的。

为达到兼容各种浏览器的效果，可以用点符号法来设置Element的属性。

例如前面提到的Element.setAttribute("Style","display:none;");

可以修改为    Element.style.display="none";

或通过cssText设置多个样式值：Element.style.cssText="display:none;border:red solid 1px"

以下是实例： 运用js隐藏“网站首页”链接

网站首页
文章中心
图片中心
视频中心
友情链接

setAttribute属性在为html标签添加class样式时也存在兼容性的问题。

setAttribute("class, value)这样在火狐中是可以实现的，但是在IE7上却存在问题，要使用

setAttribute("className", value)，而className火狐上有不识别，所以在兼容处理时，要写上两条语句。

Element.setAttribute("class", value);

Element.setAttribute("className", value); //for IE7

或者单独使用

Element.className=value;

这样就很好的处理js中setAttribute的兼容性问题。