將元數據添加到HTML元素的最佳方式

我試圖放在一起標記HTML中的各種組件，並通過jQuery腳本解析並在頁面加載時創建。將元數據添加到HTML元素的最佳方式

例如，在現階段，我可以把我的網頁下面..

<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>

當jQuery腳本發現它，它會注入必要的HTML與上一個圖標創建一個按鈕和所有必要的事件等。

但是，這是混亂，需要很多長類名稱。我寧願做這樣的事情...

<a href="#" class="Theme-Button" data="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

它並沒有那麼短，但整潔在我看來，需要較少的解析。麻煩的是，我對「expandos」做了一點研究，我相當確定一些瀏覽器不喜歡它，它不會被驗證。

有人有什麼更好的建議嗎？

來源

2009-12-17 jonhobbs

我[問了一個類似的問題]（http://stackoverflow.com/questions/1600106/storing-arbitrary-info-in-html-tags-for-javascript）幾個月後又好幾個很好的答案。還請查看bobince的評論中的鏈接。 – 2009-12-17 17:28:11

[HTML標記上的非標準屬性可能重複。好東西？壞事？你的想法？]（http：// stackoverflow。com/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts） – 2014-01-31 10:59:35

重複拒絕。 – 2014-01-31 21:34:43

繼續操作，爲此使用一個屬性，但在其上使用前綴data-。所有HTML5元素的前綴爲data-的屬性爲explicitly allowed。例如：

<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

今天的作品在所有瀏覽器（雖然W3驗證可能會抱怨其對HTML5的支持是沒有完全準備好黃金時間），因爲它現在規定的行爲，它是面向未來的。

來源

2009-12-17 17:28:50

這是如何與Internet Explorer一起工作的？ – Felix 2010-03-04 16:43:56

@Felix：很好。它幾乎適用於任何瀏覽器，定義自己的屬性的唯一真正問題是它導致了驗證錯誤（如果您正在驗證），它並沒有在任何地方指定（理論上，UA可能忽略它們而不是使它們可用於JS層或CSS，但顯然沒有），當然還有與新定義的屬性相沖突的風險。 HTML5正式化的重要之處在於它一舉解決了這些問題。但是你不必等，現在工作得很好，即使是在IE6上。 – 2010-03-05 08:22:54

人們也可以使用這種類的東西。

<a href="#" class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>

你必須預先定義了很多類，但它並沒有感覺比處理，你必須創建每個鍵值對太多不同。

來源

2009-12-17 17:26:45

使用jquery的「.data」屬性。這非常方便，許多人不知道。

請參閱this link瞭解更多信息。

來源

2009-12-17 17:28:52

謝謝帕特里克。如果你看看我在這裏的用戶名和那篇文章的名字，你會看到我寫了它:) 不幸的是，我需要人們能夠標記這些東西在HTML中由jQuery後來解析它必須位於HTML元素的某處，而不是腳本。 – jonhobbs 2009-12-17 17:33:51

太棒了！嘿嘿。 – 2009-12-17 17:57:56

鏈接說找不到頁面！ – Quethzel 2017-04-29 14:28:31

看看jQuery .data()函數。

來源

2009-12-17 17:28:54 micahwittman

**並務必使用粗體** – 2009-12-17 17:34:49

我使用H3，大膽的造型是SO的選擇:) – micahwittman 2009-12-17 18:18:52

的Prototype library載體：

element.store("key","value")

和

element.retrieve("key","value")。

簡單。尼斯。有效。

來源

2009-12-17 18:01:14

使用xhtml與從另一個DTD混合的自定義元素。或使用html5與custom data- attributes

來源

2009-12-17 18:08:48

將元數據添加到HTML元素的最佳方式

回答

相關問題