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學習教學】#

以上是javascript怎麼修改元素節點的屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！