attribute和property兼容性分析

<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">

        // $(‘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;
            }
        }

        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

        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;
        }

        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));

        //不会有问题
        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

        var checkonElement = document.getElementById(‘checkonElement‘);
        //alert(checkonElement.value); //safair为空字符串 其他为on

        //针对不兼容浏览器
        function getSafairRadioCheckboxValue(input) {
            var v = input.value;
            return v === ‘‘ ? ‘on‘ : v;
        }

        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);