attribute和property兼容性分析

上一篇文章中，详细的分析了他们的区别，请看Javascript中的attribute和property分析

这次，来详细的看下他们的兼容性，这些内容主要来自于对于jQuery(1.9.x)源代码的分析（attributes模块），首先，贴出测试的HTML代码：

<input id="username" type="text" value="lonelyclick">
 
<button value="abc" id="btn">def</button>
<button id="btn2">btn2222</button>
<button id="btn3">btn3</button>
 
<div style="color:blue;" id="box">box</div>
 
<a href="/get.do" id="baidu">baidu</a>
<img src="../../bootstrap/images/backbone.png" alt="backbone" id="backbone">
 
<select id="selecteddd">
    <option>option1</option>
</select>
 
<input type="checkbox" id="checkonElement">

下面开始逐一的分析jQuery中attributes模块中关于兼容性的处理：

兼容点1：

• 问题：在动态创建input是，如果先设置了值，再setAttribute type为radio的时候，input.value的值会丢失
• 浏览器：IE全系列
• 治疗方式：设置时，先将值保存起来

        // $('input').attr('type','radio);
        // attrHooks.type 的处理
        var input = document.createElement('input');
        input.value = 'ttt';
        input.setAttribute('type', 'radio');
        //alert(input.value); // 在IE下，弹出on 在chrome下，弹出ttt
 
        //但是注意，这样不会出问题
        var username = document.getElementById('username');
        username.value = 'lonelyclick other';
        username.setAttribute('type', 'radio');
        //alert(username.value); //全部浏览器全部弹出lonelyclick other
 
        //针对不兼容浏览器
        function setInputRadioAttribute(input) {
            var back = input.value;
            input.setAltertitle('type', 'radio');
            if (back) {
                input.value = back;
            }
        }

兼容点2：

• 问题：在为button.setAttribute('value','abc')会错误的将button.innerHTML设置为abc，get亦然
• 浏览器：IE6~7
• 治疗方式：用AttributeNode进行兼容

        var btn = document.getElementById('btn');
        //alert(btn.getAttribute('value')); //IE6~7 弹出def，其他弹出abc
 
        var btn2 = document.getElementById('btn2');
        btn2.setAttribute('value', 'seo');
        //alert(btn2.innerHTML);// IE6~7 弹出seo，其他弹出btn2222
 
        //针对不兼容浏览器
        function setButtonValueAttribute(button, value) {
            var an = document.createAttribute('value');
            an.value = value;
            button.setAttributeNode(an);
        }
 
        function getButtonValueAttribute(button) {
            var an = button.getAttributeNode('value');
            return an && an.specified ? an.value : undefined;
        }
 
        var btn3 = document.getElementById('btn3');
 
        setButtonValueAttribute(btn3, 'somethingabc');
        //alert(btn3.innerHTML); // btn3
        //alert(btn3.getAttribute('value')); //somethingabc
        //alert(getButtonValueAttribute(btn3)); //somethingabc

兼容点3：

• 问题：element.setAttribute/getAttribute style 会出问题
• 浏览器：IE6~8
• 治疗方式：读取和设置element.style.cssText来代替setAttribute和getAttribute

        var box = document.getElementById('box');
        console.log(box.style); // 全部浏览器返回CSSStyleDeclaration
        console.log(box.getAttribute('style')); // IE6~7 返回CSSStyleDeclaration，IE8返回COLOR:blue; 其他color:blue;
        box.setAttribute('style', 'background:red;') //IE6~7不起作用，其他起作用
 
        //针对不兼容浏览器
        function setStyleAttribute(element, styleText) {
            element.style.cssText = styleText + '';
        }
 
        function getStyleAttribute(element) {
            return element.style.cssText;
        }

兼容点4：

• 问题：在W3C下，获得href和src是绝对的属性值，但是IE自作聪明，将其补全为绝对路径
• 浏览器：IE6~7
• 治疗方式：用IE特有的另一个参数！！！,2是指href的value值，4是补全

        var baidu = document.getElementById('baidu');
        console.log(baidu.href); // all is http://localhost:63342/get.do
        console.log(baidu.getAttribute('href')); // IE6~7返回http://localhost:63342/get.do 其他返回/get.do
 
        var backbone = document.getElementById('backbone');
        console.log(backbone.getAttribute('src'));
        console.log(backbone.src);
        //IE6~7 http://localhost:63342/HTML5Exp/bootstrap/images/backbone.png
        //其他返回 ../../bootstrap/images/backbone.png
 
        //针对不兼容浏览器
        //http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
        console.log(baidu.getAttribute('href', 2));
        console.log(backbone.getAttribute('src', 2));
 
        console.log(baidu.getAttribute('href', 4));
        console.log(backbone.getAttribute('src', 4));

兼容点5：

• 问题：在动态创建select时，加入一个option，然后取select.selected IE返回false，其他返回true
• 浏览器：IE全版本
• 治疗方式：访问一下select的selectedIndex属性，修复选择下标，如果有optgroup的话，也要访问optgroup的哦

        //不会有问题
        var selecteddd = document.getElementById('selecteddd');
        console.log(selecteddd.options[0].selected);
 
        var select = document.createElement('select');
        var option = document.createElement('option');
        option.innerHTML = 'option111';
        option.value = 1;
        select.appendChild(option);
        document.body.appendChild(select);
 
        console.log(option.selected); //IE6~7 false 其他true
 
        //针对不兼容浏览器
        select.selectedIndex;
        console.log(option.selected); // true

兼容点6：

• 问题：默认的radio或者checkbox的input，默认value为空字符串
• 浏览器：safair
• 治疗方式：如果有这个bug，就判断是否为'',如果为'',返回on就好了

        var checkonElement = document.getElementById('checkonElement');
        //alert(checkonElement.value); //safair为空字符串 其他为on
 
        //针对不兼容浏览器
        function getSafairRadioCheckboxValue(input) {
            var v = input.value;
            return v === '' ? 'on' : v;
        }

兼容点7：

• 问题：动态创建的input，如果设置checked或者selected为true，就不起作用的
• 浏览器：IE6~7
• 治疗方式：用defaultChecked和defaultSelected替换之

        var defaultCheckedInput = document.createElement('input');
        defaultCheckedInput.type = 'checkbox';
        defaultCheckedInput.checked = true; //无效，在浏览器上可以看到，没有被选中
        document.body.appendChild(defaultCheckedInput);
 
        //针对不兼容浏览器
        var defaultCheckedInput = document.createElement('input');
        defaultCheckedInput.type = 'checkbox';
        defaultCheckedInput.defaultChecked = true; //被选中
        document.body.appendChild(defaultCheckedInput);

这一部分是为jQuery的源码分析做参考，请看：jQuery.attributes源码分析(attr/prop/val/class)

参考

• http://www.cnblogs.com/rubylouvre/p/3524113.html
• http://www.cnblogs.com/snandy/archive/2012/05/06/2473936.html
• http://www.cnblogs.com/rubylouvre/p/3524113.html
• http://www.cnblogs.com/rubylouvre/archive/2009/12/07/1618182.html
• http://www.w3help.org/zh-cn/causes/SD2021
• http://www.jb51.net/article/30389.htm
• http://www.jb51.net/article/39485.htm
• http://www.cnblogs.com/top5/archive/2011/07/13/2105260.html