javascript如何修改元素節點的屬性

這篇文章給大家分享的是有關javascript如何修改元素節點的屬性的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

修改方法：1、使用setAttribute()方法修改節點屬性的值，語法“節點.setAttribute(屬性名,值)”；2、使用removeAttribute()方法刪除指定的屬性，語法“節點.removeAttribute(屬性名)”。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript修改元素節點的屬性

setAttribute() 方法設置屬性值

使用元素的 setAttribute() 方法可以設置元素的屬性值。用法如下：

setAttribute(name, value)

參數 name 和 value 分別表示屬性名稱和屬性值。屬性名和屬性值必須以字符串的形式進行傳遞。如果元素中存在指定的屬性，它的值將被刷新；如果不存在，則 setAttribute() 方法將為元素創建該屬性并賦值。

<div id="red">紅盒子</div>
<div id="blue">藍盒子</div>
<script>
    var red = document.getElementById("red");  //獲取紅盒子的引用
    var blue= document.getElementById("blue");  //獲取藍盒子的引用
    red.setAttribute("title", "這是紅盒子");  //為紅盒子對象設置title屬性和值
    blue.setAttribute("title", "這是藍盒子");  //為藍盒子對象設置title屬性和值
</script>

removeAttribute() 方法刪除屬性

使用元素的 removeAttribute() 方法可以刪除指定的屬性。用法如下：

removeAttribute(name)

參數 name 表示元素的屬性名。

示例：

<script>
    window.onload = function () {  //綁定頁面加載完畢時的事件處理函數
        var table = document.getElementByTagName("table")[0];  //獲取表格外框的引用
        var del = document.getElementById("del");
        var reset = document.getElementById("reset");
        del.onclick = function () {
            table.removeAttribute("border");
        }
        reset.onclick = function () {
            table.setAttribute("border", "2");
        }
</script>
<table width="100%" border="2">
    <tr>
        <td>數據表格</td>
    <tr>
</table>
<button id="del">刪除</button><button id="reset">恢復</button>

在上面示例中設計了兩個按鈕，并分別綁定了不同的事件處理函數。單擊“刪除”按鈕即可調用表格的 removeAttribute() 方法清除表格邊框，單擊“恢復”按鈕即可調用表格的 setAttribute() 方法重新設置表哥便可的粗細。

感謝各位的閱讀！關于“javascript如何修改元素節點的屬性”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！