JavaScriptで要素ノードの属性を変更する方法

変更方法: 1. setAttribute() メソッドを使用してノード属性の値、構文「node.setAttribute(属性名, 値)」を変更します; 2. RemoveAttribute() メソッドを使用して削除します指定された属性、構文「node .removeAttribute(属性名)」。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

#JavaScript は要素ノードの属性を変更します

setAttribute() メソッドを使用して属性値を設定します

Use 要素の setAttribute() メソッドを使用して、要素の属性値を設定できます。使用法は次のとおりです。

setAttribute(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)

パラメータ名は要素の属性名を表します。

例:

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

上の例では、2 つのボタンが設計され、異なるイベント処理関数にバインドされています。 「削除」ボタンをクリックしてテーブルのremoveAttribute()メソッドを呼び出してテーブルの境界線をクリアし、「復元」ボタンをクリックしてテーブルのsetAttribute()メソッドを呼び出して厚さをリセットします。

[関連する推奨事項:

JavaScript 学習チュートリアル]

以上がJavaScriptで要素ノードの属性を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。