Javascript為元素添加樣式

| | | | | | |

將 CSS 類與 ID 進行比較時,區別在於 CSS 類將樣式應用於多個元素。另一方面,ID 將樣式應用於單個元素。 ID 也很特殊,您可以使用特殊的 URL 直接鏈接到一個元素,並由 JavaScript 使用。

CSS ,選擇器用於定位網頁上的特定元素或多個元素。一旦一個元素被定位,一個樣式或一組樣式就可以應用到元素上。

有多種選擇器可用。最常用的兩個是 ID。兩者都用於定位具有標題的項目。

和ID選擇器

有什麼區別n 標籤>和ID?這是許多 CSS 新手提出的問題,我們將在本指南中回答。

當您閱讀完本指南時,您將知道這兩個選擇器之間的區別。您將獲得所需的信息,以便對在代碼中使用哪個選項做出明智的決定。讓我們開始吧。

CSS 選擇器

一個網頁,您想將某些樣式應用於頁面的特定元素。例如,您可以將所有

標籤的文本顏色設置為綠色或更改標題字體大小。

選擇器允許您定位網頁上可以應用樣式的特定元素。 CSS 中有很多可用的選擇器,例如通用選擇器、後代選擇器、子選擇器和分組選擇器。如果您想了解更多關於 CSS 選擇器的信息,請閱讀我們的 CSS 選擇器初學者指南。

兩個選擇器,id , 分別用於基於分配給 HTML 元素的類和 ID 的樣式元素,但這些選擇器經常令人困惑,因此我們將探討每個選擇器的作用。

div>

id 選擇器是唯一的

id 選擇器允許您定義適用於網頁上單個元素的樣式規則。每個網頁只能有一個帶有單個<的元素一個 ID 屬性。這意味著 ID 選擇器永遠不能用於設置多個元素的樣式。

ID 選擇器使用井號定義。它們後面緊跟標識值您想應用一組樣式規則。下面是一個實際的身份選擇器示例:

這種樣式適用於我們的HTML文檔中id為betaBanner

元素。該樣式會將元素的背景顏色設置為橙色,將元素中的文本顏色設置為白色。

類選擇器不是唯一的

類選擇器允許您定義適用於 any 的樣式規則元素 具有等於某個值的類屬性。

如上所述 - 標識選擇器不能用於元素樣式。事實上,ID 在一個網頁上只能使用一次。另一方面,課程可用於多個元素。因此,如果您使用類選擇器應用樣式,則共享該類的任何元素都將受制於您定義的樣式。

類選擇器使用句點定義,後跟要使用的類的值你想應用一組樣式。下面是類選擇器的示例:

.orangeBackground {背景顏色:橙色; }

這個樣式將我們的

標籤的背景顏色設置為橙色。此外,樣式定義了橙色 標籤,我們可以使用以下代碼:

在這段代碼中,為 orangeBackgroundlarge 類定義的所有樣式規則都應用於我們的 Web 元素。但是,使用 ID 卡,我們無法重現此行為,因為每個項目只能有一個 ID。

IDs 有一個獨特的瀏覽器函數

到目前為止,我們已經討論了 IDs 可以將樣式應用於單個元素。與可以將樣式應用於多個元素的類不同。這不是類和 ID 選擇器之間的唯一區別。

在瀏覽器中,類沒有特殊功能。它們的主要目的是允許您將樣式應用於網頁上的許多元素。另一方面,瀏覽器可以使用 ID 訪問網頁的某個部分。

如果您為元素分配 ID,則可以使用特殊 URL 直接鏈接到該元素元素。這種行為之所以有效,是因為 ID 在網頁上是唯一的。

假設我們要發送一個鏈接到我們的網站,該鏈接會自動滾動到帶有標題的用戶。我們可以使用以下代碼:

在這段代碼中,我們為標籤

標籤分配了一張身份證,其中包含文本 Three。現在我們可以向用戶發送指向網頁上該元素的直接滾動鏈接。這是使用以下地址完成的:

https://domain .com/index.html#section3

當用戶訪問此 URL(其中 domain.com 是您的站點 URL)時,他們將滾動到 id 為 < em>section3 。此行為不會影響類。

IDs are used by JavaScript

如果您有使用 JavaScript 的經驗 ,你就會知道ID在這種編程語言中是常用的,getElementById函數可以讓你在網頁上選擇一個元素,它是基於只有一個項目可以共享的事實使用相同的 ID。

另一方面,類可以反映網頁上的多個元素。如果您想使用 JavaSc 中的特定元素進行翻錄,它們將沒有用。

你可以同時使用這兩個類選擇器 ID 和 CSS

HTML 中沒有規則阻止您將 ID 分配給類的元素。

假設我們要將與名為 backgroundOrange 的類關聯的樣式應用於 標記應用獨特的樣式。您可以使用以下代碼:

標籤將受制於 backgroundOrange 的樣式。此外,它還將使用身份選擇器將樣式應用於 ID customDiv

結論

使用 CSS 時,沒有特定理由讓您在課程中使用 ID 卡。但是,如果你想要一個網頁元素的樣式,最好只使用 ID,如果你想要多個元素的樣式,則使用 ID。

在本教程中我們已經討論過,參考示例,CSS ID 和類選擇器的基礎知識,我們已經比較了兩者。您現在已經準備好開始使用 CSS ID 和類選擇器作為經驗豐富的 開發者!