HTML DOM removeAttribute()メソッドの使い方を徹底解説
HTML DOMのremoveAttribute()メソッドは、HTMLドキュメント内の指定した要素から、パラメータで指定した属性を削除するためのメソッドです。スタイルやクラスなど、要素に設定された属性を動的に取り除きたい場合に活用できます。
構文
removeAttribute()メソッドの基本構文は以下のとおりです。
node.removeAttribute(attributeName);
attributeNameには、削除したい属性名（例：「style」「class」「id」など）を文字列で指定します。
サンプルコード
ここでは、<p>要素に設定されているstyle属性を、ボタンのクリック操作で削除する例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM removeAttribute() method Demo</h1>
<p style="color:#db133a;font-size:1.2rem;">Hi! I'm a para element in HTML with some random text</p>
<button onclick="remove()" class="btn">Remove Attribute</button>
<script>
function remove() {
document.querySelector("p").removeAttribute("style");
}
</script>
</body>
</html>
コードの解説
このサンプルでは、<p>要素に色とフォントサイズを指定するstyle属性があらかじめ設定されています。「Remove Attribute」ボタンをクリックすると、JavaScriptのremove()関数が実行され、document.querySelector("p")で取得した最初の<p>要素からremoveAttribute("style")によってstyle属性が削除されます。
実行結果
上記のコードをブラウザで開くと、次のように表示されます。
この状態で「Remove Attribute」ボタンをクリックすると、<p>要素からstyle属性が取り除かれ、赤字だったテキストが通常の表示に戻ります。
まとめ
removeAttribute()メソッドを使えば、JavaScriptから簡単にHTML要素の属性を削除できます。属性を追加するsetAttribute()メソッドと組み合わせることで、Webページの見た目や挙動を柔軟に制御できるようになります。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや