在我们模板设计的过程中，不免有很多操作要用到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隐藏“网站首页”链接
<body>
<a href="#" id="home">网站首页</a>
<a href="#">文章中心</a>
<a href="#">图片中心</a>
<a href="#">视频中心</a>
<a href="#">友情链接</a>
</p>
<script type="text/javascript">
document.getElementById("home").setAttribute("Style","display:none;");
/*↑会有兼容性问题代码*/
/*document.getElementById("home").style.display="none";*//*处理方法*/
/*document.getElementById("home").style.cssText="display:none;";*//*处理方法*/
</script>
</body>
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的兼容性问题。 |
注册 登录
