如何使用自己的屬性值在JavaScript

Question

<button own-attribute="value1 value2">Button</button> 

我想使用的值value1 & value2的own-attribute在JavaScript中作出的<button>的風格變化。

Answer 1

在CSS的唯一解決方案，您可以使用attribute selectors瞄準這樣的元素：

button[own-attribute~="value1"] { 
    color: blue; 
} 

使用attributeName~=value你可以針對單個值，如果你的屬性包含的值的空格隔開列表。

---

注意，但是，自定義屬性應使用data--prefix，以防止本地屬性名稱衝突。

• Attribute selectors
• data- attributes
• How to use data- attributes

---

如果你只想retriebe元素進一步處理它在JS，使用相同的選擇：

// to contain just one of the values 
var el = document.querySelector('button[own-attribute~="value1"]'); 

// to contain both values, no matter the order 
var otherEl = document.querySelector('button[own-attribute~="value1"][own-attribute~="value2"]');