如何使用数据样式名称选择颜色

Question

我正在学习JavaScript，我试图通过数据样式名称来选择颜色。有四种颜色具有不同的数据样式名称和的数据样式id。我想知道如何选择具有数据类型名称的颜色。

例如：更改数据样式name＝"；黑色">到数据样式name＝"；红色">之类的东西。GetElementByName("数据样式名称"(.value=&"；红色">

感谢

<li>
<a class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/194602/ma/Xx_WYtPp-3g.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/194602/zo/Xx_WYtPp-3g.jpg&quot;}" data-style-name="Washed Navy" data-style-id="30164"
data-sold-out="true" data-description="null" href="/shop/sweatshirts/dirphu7gz/cey3obkfw" data-no-tubolink="data-no-tubolink"><img width="32" height="32" src="//d17ol771963kd3.cloudfront.net/194602/sw/Xx_WYtPp-3g.jpg" alt="Xx wytpp 3g"></a>
<a class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/194600/ma/OggexK6HrvQ.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/194600/zo/OggexK6HrvQ.jpg&quot;}"
data-style-name="Washed Navy" data-style-id="30164" data-sold-out="true" data-description="null" href="/shop/sweatshirts/dirphu7gz/cey3obkfw?alt=0" data-no-tubolink="data-no-tubolink"><img width="32" height="32" src="//assets.supremenewyork.com/194600/sw/OggexK6HrvQ.jpg" alt="Oggexk6hrvq"></a>
<a class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/194601/ma/0YQtNT2tzbk.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/194601/zo/0YQtNT2tzbk.jpg&quot;}"
data-style-name="Washed Navy" data-style-id="30164" data-sold-out="true" data-description="null" href="/shop/sweatshirts/dirphu7gz/cey3obkfw?alt=1" data-no-tubolink="data-no-tubolink"><img width="32" height="32" src="//assets.supremenewyork.com/194601/sw/0YQtNT2tzbk.jpg" alt="0yqtnt2tzbk"></a>
<a class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/194603/ma/pFnGyYydRpU.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/194603/zo/pFnGyYydRpU.jpg&quot;}"
data-style-name="Washed Navy" data-style-id="30164" data-sold-out="true" data-description="null" href="/shop/sweatshirts/dirphu7gz/cey3obkfw?alt=2" data-no-tubolink="data-no-tubolink"><img width="32" height="32" src="//assets.supremenewyork.com/194603/sw/pFnGyYydRpU.jpg" alt="Pfngyyydrpu"></a>
<a class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/194604/ma/dHU0IW1cn6s.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/194604/zo/dHU0IW1cn6s.jpg&quot;}"
data-style-name="Washed Navy" data-style-id="30164" data-sold-out="true" data-description="null" href="/shop/sweatshirts/dirphu7gz/cey3obkfw?alt=3" data-no-tubolink="data-no-tubolink"><img width="32" height="32" src="//assets.supremenewyork.com/194604/sw/dHU0IW1cn6s.jpg" alt="Dhu0iw1cn6s"></a>
</li>

Answer 1

选择

选择具有data-style-name属性的第一个元素

document.querySelector('[data-style-name]')

选择具有data-style-name属性的所有元素

document.querySelectorAll('[data-style-name]')

选择data-style-name属性等于"Washed Navy"的第一个元素

document.querySelector('[data-style-name="Washed Navy"]')

选择所有data-style-name属性等于"Washed Navy"的元素

document.querySelectorA('[data-style-name="Washed Navy"]')

修改属性

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

将一个元素的data-style-name属性更改为red(querySelector返回一个元素(

document.querySelector('[data-style-name="Washed Navy"]').dataset.styleName = 'red';

将所有元素的data-style-name属性更改为red(querySelectorAll返回元素集合(

const elts =document.querySelectorAll('[data-style-name]');
elts.forEach(element => element.dataset.styleName = 'red');

Answer 2

像这样：

const anchor = document.querySelector('[data-style-name="Washed Navy"]');
anchor.setAttribute('data-style-name', 'red')