js中setAttribute用法詳解

jssetAttribute基本用法

element.setAttribute(attributename,attributevalue)

setAttribute() 方法添加指定的屬性,併爲其賦指定的值,看到w3c的例子

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

我們經常需要在JavaScript中給Element動態添加各種屬性,這可以通過使用setAttribute()來實現,這就涉及到了瀏覽器的兼容性問題。

var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");

這裏利用setAttribute指定e的onclick屬性,簡單,很好理解。但是IE不支持,IE並不是不支持setAttribute這個函數,
而是不支持用setAttribute設置某些屬性,例如對象屬性、集合屬性、事件屬性,也就是說用setAttribute設置style和onclick這些屬性
在IE中是行不通的。爲達到兼容各種瀏覽器的效果,可以用點符號法來設置Element的對象屬性、集合屬性和事件屬性。

程序代碼

document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").οnclick= function () { alert("This is a test!"); }

例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <script language="JavaScript">
            function change() {
                var input = document.getElementById("li1");
                alert(input.getAttribute("title"));
                input.setAttribute("title", "mgc");
                alert(input.getAttribute("title"));
            }
        </script>
    </head>
    <body>
        <ul id="u">
            <li id="li1" title="hello">Magci</li>
            <li>J2EE</li>
            <li>Haha!</li>
        </ul>
        <input type="button" value="Change" onClick="change();" />
    </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章