Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptを使用してHTML要素にIDを追加する方法

このきちんとしたコードスニペットを使用すると、JavaScriptを使用して既存のHTML要素にID属性を追加できます。


コード

let featuredTitle = document.querySelector("h1");
featuredTitle.id = "featured-title";

ビデオで起こっていることは次のとおりです。

  • 最初に、Webページでh1要素を見つけて、それをfeaturedTitleという変数に割り当てます。 。
  • 次に、この場合はドット表記（variableName.attribute）を介してその変数にID属性を付加します：featuredTitle.id 'featured-title'の値を指定します 。

これは、DOM内の既存の要素に対して行うことができます。

これで、この動的に作成されたIDを使用して、CSS（新しいIDを介して要素のスタイルを設定するため）またはJavaScriptを使用してインタラクティブな動作（クリックイベントなど）を処理することができます。


  1. JavaScriptを使用してHTML要素にoninput属性を追加しますか？

    このために、addEventListener（）と一緒にdocument.getElementById（）の概念を使用します。以下はJavaScriptコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

  2. JavaScriptを使用してCSSルールをスタイルシートに追加する方法は？

    insertRule（）は、スタイルシートの定義された位置にルールを追加するのに役立ちますが、deleteRule（）は特定のスタイルを削除します。 次の例は、JavaScriptを使用してスタイルシートに追加できるCSSルールを示しています。 例 <!DOCTYPE html> <html> <head> <style type="text/css" id="custom"> body {    background-color: silver; } </style> &