javascript——DOM之操作属性的多种方式

获取和设置元素的方法：. [] getAttribute

具体实例：

HTML部分：

<input type="text" id="text1" value="text" _name_="自定义属性" /><br><br>
<img src="images/pic.jpg" id="img1" style="180px" />

JS部分：

window.onload = function(){
        
        var oText = document.getElementById('text1');

        // 获取和设置元素的方法：. []
        
        // alert(oText.value);
        // oText.value = '文本框';

        // alert(oText['value']);
        // oText['value'] = '文本框';

        // var name = 'value';
        // alert(oText.name);        //有问题
        // alert(oText[name]);        //OK

        /*
            元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值
        */

        // alert(oText.getAttribute('value'));            //text


        /*
            元素.setAttribute(属性名称，属性值); 方法 给指定元素指定的属性设置值
        */

        // oText.setAttrbute('value' ,'文本框');

        /*
            元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性
        */
        // oText.removeAttribute('value');

        /*
        1.用.和[]的形式无法操作元素的自定义属性
            getAttribute可以操作元素的自定义属性
        */
        // alert( oText._name_ );
        // alert( oText['_name_'] );
        // alert(oText.getAttribute('_name_'));

        var oImg = document.getElementById('img1');

        /*
            可以获取元素属性实际的值
            ie7下还是会返回资源的绝对路径
        */

        // alert(oImg.src);
        // alert(oImg['src']);
        // alert(oImg.getAttribute('src'));
        // alert(oImg.style.getAttribute('width'));        //仅IE会弹出180px

    };