Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

元素属性操作的浏览器差异

  之前的文章中有说过Attribute和Property的区别,但是并没详细到具体的操作上,更没详细到浏览器的兼容性差异上。这个东西在浏览器上的行为是不同的,特别是Attribute与控件的交互方面时的差异。其实也就低版本IE比较奇葩,做完测试就能理解的。
  现在,我们有个文本框控件,并且有初始值。这个初始值是以value属性在HTML中指定的。现在我们编辑这个控件上的文字之后,再分别取控件上的value attribute和value property看看他们的值。
<!DOCTYPE html>
<input id="inp" value="次碳酸钴" />
<script>
inp.onblur=function(){
  console.log("attribute:"+inp.getAttribute("value"));
  console.log("property:"+inp.value);
};
</script>

  看吧,这个测试在IE8-上比较奇葩。在IE8-上对控件的操作也会作用到Attribute上。但是我们反过来测试呢?操作Attribute,看看控件的变化。 <!DOCTYPE html>
<input id="inp" value="次碳酸钴" />
<script>
inp.setAttribute("value","啊啊啊");
</script>

  这张图上的浏览器顺序还是和上一张一样的。左上是IE9,右上是IE8。这回轮到IE9奇葩了(IE10也一样),IE9+会无视控件上Attribute的修改。但是没这么简单的,我们再做一点改动试试。
<!DOCTYPE html>
<input id="inp" value="次碳酸钴" />
<script>
inp.value="呃呃呃";
inp.setAttribute("value","啊啊啊");
</script>

  是不是有点被这个结果搞晕了?我们在设置attribute之前设置了property,导致Chrome和FireFox的行为和刚才的IE9+一样无视了Attribute。根据这些结果我们就可以得出这样的结论:
  在控件相关的属性上:
   IE8-:始终对Attribute负责
   IE9+:始终不对Attribute负责
   Chrome&FireFox:当没有操作过Property时对Attribute负责
  这里我还强调了是在控件相关的属性上,比如我测试的value就是控件相关的属性。还有selected和checked之类的。但如果不是控件相关的属性呢?我们用元素相关的class属性再来做个测试。
<!DOCTYPE html>
<style>
.a {color:red;}
.b {color:green;}
</style>
<input id="inp" value="次碳酸钴" />
<script>
inp.className="a";
inp.setAttribute("class","b");
</script>

  结果是统一的,并没有刚才测试控件相关属性那样的问题,所有浏览器都是对Attribute负责的。以上测试的这些都是内置的属性,如果换成自定义的属性呢?自定义属性和最初的控件相关属性差不多,但是又有一点不同。因为现代浏览器对自定义的Attribute不会自动关联Property,只有在IE8-上才会关联。
<!DOCTYPE html>
<input id="inp" value="次碳酸钴" test="123" />
<script>
console.log(inp.test);
</script>

  看吧,由于没有默认关联。在非IE8-上是无法直接从Property上取Attribute的。之前的几个东西也许比较少用到,但是这个自定义属性的浏览器行为差异算是比较基础的东西了吧。这是很常用的,所以必须了解。
  经过这些测试应该就能明白Property和Attribute在操作上的浏览器差异了吧?这篇文章就到这儿~
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^