Change language
Python.Engineering Wiki Javascript要素にスタイルを追加

Javascript要素にスタイルを追加

__main__ Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | nis Python module | os Python module | PS PHP module | Python functions | re Python module | select Python module | selectors Python module | site Python module | StackOverflow | time Python module | UI PHP module
Michael Zippo Michael Zippo

CSSクラスをIDと比較する場合の違いは、CSSクラスが複数の要素にスタイルを適用することです。一方、IDは、単一の要素にスタイルを適用します。 IDは、要素に直接リンクするために特別なURLを使用でき、JavaScriptによって使用されるという特別なものでもあります。

CSS 、セレクターは、Webページ上の特定の要素または複数の要素をターゲットにするために使用されます。要素がターゲットにされると、スタイルまたはスタイルのセットを要素に適用できます。

さまざまなセレクターを使用できます。最も一般的に使用される2つは、とIDです。どちらも、タイトルのあるアイテムをターゲットにするために使用されます。

およびIDセレクター

違いは何ですかn タグ>およびID？これはCSSに不慣れな多くの開発者からの質問であり、このガイドで回答します。

このガイドを読み終える頃には、これら2つのセレクターの違いがわかります。コードで使用する選択について情報に基づいた決定を行うために必要な情報が得られます。始めましょう。

CSSセレクター

ウェブページ、ページの特定の要素に特定のスタイルを適用したい。たとえば、すべての

タグのテキストの色を緑色に設定したり、ヘッダーのフォントサイズを変更したりできます。

セレクターを使用すると、スタイルを適用できるWebページ上の特定の要素をターゲットにできます。 CSSには、ユニバーサルセレクター、子孫セレクター、子セレクター、グループ化セレクターなど、多くのセレクターがあります。 CSSセレクターについて詳しく知りたい場合は、CSSセレクターの初心者向けガイドをお読みください。

2つのセレクターとid 、はそれぞれHTML要素に割り当てられたクラスとIDに基づくスタイル要素に使用されますが、これらのセレクターは混乱を招くことが多いため、それぞれの機能について説明します。

idセレクターはuniqueです

idセレクターを使用すると、Webページの単一の要素に適用できるスタイルルールを定義できます。各Webページには単一の要素を持つ要素を1つだけ含めることができます。 ID属性。これは、IDピッカーを使用して複数の要素のスタイルを設定することはできないことを意味します。

IDセレクターはポンド記号を使用して定義され、直後にID値が続きます。これに一連のスタイルルールを適用します。動作中のIDセレクターの例を次に示します。

このスタイルは、IDが betaBannerのHTMLドキュメントの

要素に適用されます。スタイルは、要素の背景色をオレンジ色に設定し、要素のテキスト色を白に設定します。

クラスセレクターは一意ではありません

クラスセレクターを使用すると、すべてに適用されるスタイルルールを定義できます特定の値に等しいクラス属性を持つ要素。

前述のように、IDセレクターを要素スタイルに使用することはできません。実際、IDはWebページで1回しか使用できません。一方、コースは複数の要素で使用できます。したがって、クラスセレクターを使用してスタイルを適用する場合、そのクラスを共有する要素はすべて、定義したスタイルの対象になります。

クラスセレクターは、ピリオドとそれに続くクラスの値を使用して定義されます。一連のスタイルを適用します。動作中のクラスセレクターの例を次に示します。

。 .orangeBackground {背景色：オレンジ; }

このスタイルは、

タグの背景色をオレンジに設定します。また、スタイルはオレンジ色のタグに適用する場合は、次のコードを使用して適用できます。

このコードでは、 orangeBackgroundクラスとlargeクラスに定義されているすべてのスタイルルールがWeb要素に適用されます。ただし、IDカードでは、各アイテムが持つことができるIDは1つだけであるため、この動作を再現できませんでした。

IDには固有のブラウザ機能があります

これまで、IDでスタイルを適用できることについて説明してきました。単一の要素。複数の要素にスタイルを適用できるクラスとは異なります。クラスセレクタとIDセレクタの違いはこれだけではありません。

ブラウザでは、クラスに特別な機能はありません。それらの主な目的は、Webページ上のいくつかの要素にスタイルを適用できるようにすることです。一方、IDは、ブラウザがWebページの特定の部分にアクセスするために使用できます。

要素にIDを割り当てると、特別なURLを使用してその要素に直接リンクできます。エレメント。この動作は、IDがWebページ上で一意であるために機能します。

ヘッダー付きのユーザーに自動的にスクロールするWebサイトへのリンクを送信するとします。次のコードを使用してこれを行うことができます：

このコードでは、テキスト Threeを含むタグ

タグにIDカードを割り当てています。これで、Webページ上のその要素への直接スクロールリンクをユーザーに送信できます。これは、次のアドレスを使用して行われます。

https：// domain .com / index.html＃section3

ユーザーがこのURL（ domain.com はサイトのURL）にアクセスすると、IDが<のヘッダーまでスクロールします。 em> section3。この動作はクラスには影響しません。

IDが使用されますJavaScriptによる

JavaScriptの経験がある場合、このプログラミング言語ではIDが一般的に使用されていることがわかります。getElementById関数を使用すると、Webページ上の要素を選択できます。これは、1つのアイテムのみが共有できるという事実に基づいています。同じIDを使用します。

一方、クラスはWebページ上の複数の要素を反映できます。 JavaScの特定の要素を操作してリッピングする場合は、これらは役に立ちません。

両方のクラスを使用できますセレクターIDとCSS

HTMLには、クラスの要素に両方のIDを割り当てることを妨げるルールはありません。< / p>

backgroundOrangeというクラスに関連付けられたスタイルをタグにも一意のスタイルを適用する必要があります。次のコードを使用して実行できます。

タグは、 backgroundOrangeのスタイルの対象になります。さらに、IDセレクターを使用してID customDivに適用されるスタイルも使用します。

結論

CSSを使用する場合、クラスでIDカードを使用する特別な理由はありません。ただし、IDは、1つのWebページ要素のスタイルが必要な場合にのみ使用し、複数の要素のスタイルが必要な場合に使用することをお勧めします。

このチュートリアルでは、以下を参照して説明しました。例、CSS IDとクラスセレクターの基本、および両方を比較しました。これで、CSSIDとクラスセレクターを熟練したとして使用する準備が整いました。開発者！