如何在 JavaScript 和 CSS 中使用 HTML 數據屬性

如何通過數據屬性傳遞給 HTML 元素的雜項數據並與之交互。

在本教程中，我們將使用 CheatCode 的全棧 JavaScript 框架 Joystick。 Joystick 將前端 UI 框架與用於構建應用的 Node.js 後端結合在一起。

首先，我們要通過 NPM 安裝 Joystick。確保在安裝之前使用 Node.js 16+ 以確保兼容性（如果您需要學習如何安裝 Node.js 或在計算機上運行多個版本，請先閱讀本教程）：

終端

npm i -g @joystick.js/cli

這將在您的計算機上全局安裝操縱桿。安裝好之後，接下來我們新建一個項目：

終端

joystick create app

幾秒鐘後，您將看到一條消息已註銷到 cd 進入你的新項目並運行 joystick start ：

終端

cd app && joystick start

在此之後，您的應用應該可以運行了，我們可以開始了。

為元素添加數據屬性

首先，我們將在 /ui/pages/index/index.js 處修改現有文件 在我們的應用程序中給我們一個空白的工作（這已經連接到 http://localhost:2600/ 的根路由 這將使測試我們的工作變得容易）：

/ui/pages/index/index.js

import ui from '@joystick.js/ui';

const Index = ui.component({
  render: () => {
    return `
      <div>
      </div>
    `;
  },
});

export default Index;

在這裡，我們只是用準系統操縱桿組件替換現有代碼。這給了我們一個空的 <div></div> 瀏覽器中的標籤，僅此而已（如果我們加載 http://localhost:2600 現在在瀏覽器中，我們將看不到任何正確的內容。

從這裡開始，讓我們更新我們的 HTML 以包含一些帶有數據屬性的額外標籤並解釋發生了什麼：

/ui/pages/index/index.js

import ui from '@joystick.js/ui';

const Index = ui.component({
  render: () => {
    return `
      <div>
        <div class="text" data-story="He huffed, and he puffed, and blew the house down."></div>
        <div class="icon" magic="🥳"></div>
      </div>
    `;
  },
});

export default Index;

幾乎相同，但在我們的空 <div></div> 內部 標籤，我們添加了兩個額外的 div。第一個給定一個類 text 第二個是 icon 類 .

在 text div，我們添加了一個數據屬性data-story 將值設置為講述一個短篇故事的字符串。這裡，data-story 是一個非標準的 HTML 屬性。我們可以擺脫這個，因為我們使用的是 data- 前綴告訴 HTML 這是一個自定義數據屬性。

在 icon div，我們添加了一個屬性 magic 它的值是🥳，或者是“派對面孔”表情符號。儘管我們在本教程中的重點是數據屬性，但這值得指出。從技術上講，您可以將任何自定義屬性添加到 HTML 標記（例如，pizza="🍕" ) 並且我們稍後看到的用法仍然有效，但是，這樣做的危險是您可能與 actual 發生衝突 或支持的 HTML 屬性。雖然大多數瀏覽器都會尊重這一點，但它可能會產生令人驚訝的後果（例如被 HTML linter 拾取/忽略）。

我們在這裡作為示例執行此操作，但建議在任何自定義屬性名稱前加上 data- .

檢索和操作數據屬性

在這一點上，除了向我們的 HTML 添加一些額外的元數據之外，我們所做的工作似乎毫無意義。為了讓這更有用，讓我們看看如何通過向我們的 HTML 添加一些 DOM 事件偵聽器來檢索和操作數據屬性：

/ui/pages/index/index.js

import ui from '@joystick.js/ui';

const Index = ui.component({
  events: {
    'click [data-story]': (event) => {
      const story = event.target.getAttribute('data-story');
      event.target.setAttribute('data-story', story?.split('').reverse().join(''));
    },
    'click [magic]': () => {
      alert('It\'s an emoji, maaaan.');
    },
  },
  render: () => {
    return `
      <div>
        <div class="text" data-story="He huffed, and he puffed, and blew the house down."></div>
        <div class="icon" magic="🥳"></div>
      </div>
    `;
  },
});

export default Index;

在這裡，我們利用了 Joystick 組件的能力，將 DOM 事件偵聽器添加到我們的組件呈現的元素中。在這裡，我們添加了一個 click [data-story] 的事件監聽器 選擇器。這可能看起來有點奇怪。通常，事件選擇器（或 CSS 選擇器，如果您願意，名稱通常可以互換使用）是 .class-like-this 或 #id-like-this .

在這裡，我們通過其 HTML 屬性選擇一個元素。為此，我們將屬性名稱括在方括號 [] 中 .請注意，我們沒有指定 value 屬性的名稱，只是屬性的名稱（=之前的部分 在我們的 HTML 中）。

這裡的行為與您對類或 ID 的期望相同；我們只是使用不同的屬性來“定位”或“查找”DOM 中的元素。一旦我們得到它，我們的監聽器定義 click [data-story] ，我們傳遞一個函數，當 click 在具有 data-story 的元素上檢測到事件 屬性。

在該函數內部，我們接收 DOM event 由偵聽器捕獲，首先，檢索我們數據屬性的當前值（將值存儲在變量 story ) 通過調用 .getAttribute() 可在所有 DOM 元素上訪問的方法。這裡，event.target 表示檢測到事件的元素。到 .getAttribute() ，我們傳遞我們要為其檢索值的屬性的名稱。

為了演示與此相反的情況——通過 JavaScript 在元素上設置屬性——在下面的行中，我們再次使用 event.target 值，但這次調用 .setAttribute() ，傳遞兩個參數：我們要設置的屬性的名稱，後跟我們要設置的值。

為了一點樂趣，我們採用 story 變量（我們屬性的原始值）並使用 .split() 將字符串拆分為數組的方法。然後，我們調用 .reverse() 在該結果數組上，後跟 .join('') 將數組重新加入字符串。如果不清楚，我們只是在將其設置回我們的 <div></div> 之前從我們的 data 屬性中反轉現有的字符串值 .

為了確保這一切都清楚，回想一下我們之前提到我們可以 添加不帶 data- 的自定義屬性 前綴（不過，在執行此操作時應小心謹慎以避免出現意外問題）。就像我們暗示的那樣，雖然這應該 在大多數瀏覽器中工作，不要依賴它。無論如何，對我們的 data- 使用相同的方法 屬性，我們添加一個 click 我們的 [magic] 上的事件監聽器 click [magic] 的屬性 .所有相同的規則都適用，但是，我們只是觸發 alert()，而不是在此處檢索值 證明我們可以 為自定義屬性添加監聽器。

雖然這涵蓋了數據屬性的主要用例，但接下來，我們將看看數據屬性的一個鮮為人知的特性：在 CSS 中使用它們的能力。

在 CSS 中使用數據屬性

在 CSS 中有兩種使用數據屬性的方法（同樣，我們將其用作“包羅萬象”的術語來指代任何 HTML 屬性以鼓勵良好的行為）：作為選擇器——類似於我們在上面看到的事件選擇器——和作為我們 CSS 中的值。讓我們添加一些 CSS 來演示這兩種技術到我們的組件中，然後解釋它是如何工作的：

/ui/pages/index/index.js

import ui from '@joystick.js/ui';

const Index = ui.component({
  css: `
    [data-story] {
      font-size: 18px;
      font-style: italic;
      color: red;
    }

    [data-story]:before {
      content: attr(data-story);
    }

    .icon:before {
      content: attr(magic);
    }

    [magic] {
      font-size: 80px;
    }
  `,
  events: { ... },
  render: () => {
    return `
      <div>
        <div class="text" data-story="He huffed, and he puffed, and blew the house down."></div>
        <div class="icon" magic="🥳"></div>
      </div>
    `;
  },
});

export default Index;

從我們的 data-story 開始 <div></div> ，在我們的 CSS 中，我們使用 [data-story] 我們之前看到的選擇器選擇 <div></div> 然後對其應用一些樣式。很簡單。然而，有趣的地方在於 CSS pseudo :before 等元素 和 :after .

在這裡，使用相同的 [data-story] 選擇器，我們附加一個 :before 屬性緊接著說“我們要為 :before 添加樣式 data-story 元素上的偽元素 屬性。”在 CSS 中，偽元素，顧名思義，實際上是不存在的元素。相反，偽元素只存在於內存中，而不存在於 DOM 中（儘管在現代瀏覽器中，它們出現在“元素" 標記旁邊的標籤），但仍顯示在屏幕上。

要定義一個偽元素，我們需要指定一個 content 我們的 CSS 規則中的屬性（否則該元素不會顯示在屏幕上）。這就是事情變得有趣的地方：在 CSS 中，存在一個名為 attr() 的特殊“函數” 可以分配給 content 我們的 CSS 中的屬性。向該函數傳遞一個我們想要檢索其值的 HTML 屬性的名稱，將其設置為我們的偽元素的內容。

如果我們省略這些樣式，我們會注意到我們的 <div></div> 屏幕上保持空白。但是，只要我們添加它，我們的偽 :before 元素填充了通過 attr() 檢索到的內容 .就像我們在上面看到的所有其他內容一樣，這也適用於自定義屬性 not 以 data- 為前綴 .

如果我們在瀏覽器中打開我們的應用程序，我們應該會在屏幕上看到我們的風格化文本和表情符號。繼續並單擊它們以查看我們正在應用的事件。

總結

在本教程中，我們學習瞭如何使用 HTML 數據屬性將自定義數據添加到我們的 HTML 元素中。我們了解了 data- 之間的區別 前綴元素和元素沒有 data- 字首。接下來，我們學習瞭如何添加 JavaScript DOM 事件監聽器，使用自定義數據屬性作為我們的選擇器，學習如何動態修改元素的屬性。最後，我們學習瞭如何使用自定義 DOM 屬性來設置樣式並通過 attr() 動態設置 CSS 偽元素的內容 功能。