要素の属性を削除する JS removeAttribute() メソッド

要素の属性を削除する JS removeAttribute() メソッド

JavaScript では、要素の removeAttribute() メソッドを使用して、指定された属性を削除します。使用方法は次のとおりです。
属性を削除します(名前)

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

例1

次の例は、テーブルの境界線を動的に設定する方法を示しています。

<スクリプト>
  window.onload = function () { //ページが読み込まれたときにイベント ハンドラー関数をバインドします var table = document.getElementByTagName("table")[0]; //テーブル フレームへの参照を取得します var del = document.getElementById("del");
    var リセット = document.getElementById("リセット");
    del.onclick = 関数(){
      テーブルに境界線属性を追加します。
    }
    reset.onclick = 関数(){
      テーブルに属性を設定します("境界線", "2");
    }
</スクリプト>
<テーブルの幅="100%" 境界線="2">
  <tr>
    <td>データテーブル</td>
  <tr>
</テーブル>
<button id="del">削除</button><button id="reset">復元</button>

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

例2

次の例は、クラス削除関数をカスタマイズし、関数を呼び出して指定されたクラス名を削除する方法を示しています。

<スクリプト>
  function hasClass (element, className) { //クラス名検出関数 var reg = new RegExp ('(\\s|^)' + className + '(\\s|$)');
    return reg.test (element, className); // 正規表現を使用して同じスタイルがあるかどうかを確認します}
  関数deleteClass(要素、クラス名){
    if (hasClass (要素、クラス名)) {
      element.className.replace (reg, ' '); //削除するスタイルをキャプチャし、空の文字列に置き換えます}
  }
</スクリプト>
<div id="red" class="red blue bold">ボックス</div>
<スクリプト>
  var 赤 = document.getElementById("赤");
  クラスを削除します (赤、'青');
</スクリプト>

上記のコードでは、正規表現を使用して、className 属性値の文字列に指定されたクラス名が含まれているかどうかを検出します。存在する場合は、一致した部分文字列が空の文字列に置き換えられ、クラス名を削除するという目的が達成されます。

removeAttribute メソッドと removeAttributeNode メソッドの相違点と類似点

属性を削除する

指定された名前の属性をノードから削除します。以下は例です

document.getElementById('riskTypePie').removeAttribute("スタイル");

属性ノードの削除
注意: この方法は IE と互換性がありません。

方向:

  • 属性を削除したい要素を取得します
  • 要素から削除する属性を取得します
  • <要素>.removeAttributeNode<属性>
var ノード = document.getElementById('chartWrap');
var attr=n.getAttributeNode('style');
ノードから属性を削除します。

類似点と相違点

類似点

  • どちらの方法もノード属性を削除するために使用されます
  • 両方のメソッドの呼び出し元はラベル ノードのみです。

違い

  • removeAttribute メソッドは、削除する属性の名前を受け取ります。
  • removeAttributeNode メソッドは、削除する属性ノードを受け取ります。

要素の特定の属性を削除する JS removeAttribute() メソッドに関するこの記事はこれで終わりです。要素の属性を削除する JS removeAttribute() の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSでオブジェクト内のプロパティを削除する場合の詳細な説明
  • jsonは属性の追加、走査、削除のメソッドを実装します
  • JavaScript オブジェクト プロパティのチェック、追加、削除、アクセス操作の例
  • js delete の使用方法 (オブジェクトのプロパティと変数を削除する)
  • JavaScript でオブジェクト プロパティを追加および削除する例
  • JavaScript でオブジェクトを動的に追加、変更、削除するためのプロパティとメソッドの詳細な説明

<<:  ES6 における Object.assign() の使い方の詳細な説明

>>:  JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します

推薦する

検証コードケースのjs実装

この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

Nginx+tomcat ロードバランシングクラスタの実装方法

実験環境は以下のとおりですここでは、4 台のサーバー (1 台の nginx、負荷用の 2 台の t...

MySQLトランザクションを実行するための構文とプロセスの詳細な説明

概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...

MySQLでビューを作成する方法

基本的な構文CREATE VIEW ステートメントを使用してビューを作成できます。構文の形式は次のと...

MySQL 8.0 再帰クエリの簡単な使用例

序文この記事では、MySQL 8.0 の新機能を使用して再帰クエリを実装します。詳細なサンプル コー...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策

あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...

Tinymce リッチテキストを使用して Vue のツールバーボタンをカスタマイズする実践

目次tinymce、tinymce ts、tinymce-vue 宣言ファイルをインストールするパッ...

HTML での select optgroup タグの使用の概要

時々、選択した内容をグループ化する必要があります。以前はプログラム制御を使用していました。今日、se...

CentOS7でMySQL 5.7をアンインストールする方法

MySQLに何がインストールされているか確認する rpm -qa | grep -i mysql n...

Vue+Websocketはチャット機能を実装するだけです

この記事では、チャット機能を簡単に実装するためのVue+Websocketの具体的なコードを参考まで...

Docker可視化ツールPortainerの導入と中国語翻訳

#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...

Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)

脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...

フィルターを使用して画像に透明な CSS を書く方法

フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...

Chrome Dev Tools を使用してページのパフォーマンスを分析する方法 (フロントエンドのパフォーマンス最適化)

背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...