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

【问题标题】：How to select color with data-style-name?如何使用数据样式名称选择颜色？
【发布时间】：2020-08-30 15:39:27
【问题描述】：

我正在学习 JavaScript，我尝试通过 data-style-name 选择颜色。有四种颜色，具有不同的 data-style-name 和 data-style-id。我想知道如何使用 data-stye-name 选择颜色。

例如：用 document.GetElementByName( "data-style-name").value = "Red";

谢谢

<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>

【问题讨论】：

您想一次性更改data-style-name 吗？您当前的 HTML 全部显示为 washed Navy

标签： javascript html

【解决方案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');

【讨论】：

欢迎。编辑了我的答案，向您展示如何正确更改数据属性

【解决方案2】：

像这样：

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

【讨论】：