How to select color with data-style-name?

I am learning JavaScript and I tried to select color by data-style-name. There are four colors with different data-style-name and data-style-id. I was wondering how to select a color with a data-stye-name.

For example: Change data-style-name = "Black" to data-style-name = "Red" with something like document.GetElementByName("data-style-name").value = "Red";

Thanks

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

Add Comment
2 Answer(s)

SELECTION

Select the first element with a data-style-name attribute

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

Select all the elements with data-style-name attributes

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

Select the first element with a data-style-name attribute that equals ‘Washed Navy’

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

Select all the elements with data-style-name attributes that equal ‘Washed Navy’

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

MODIFIYING ATTRIBUTES

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

Change the data-style-name attribute to red for one element (querySelector returns one element)

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

Change the data-style-name attribute to red for all elements (querySelectorAll returns a collection of elements)

const elts =document.querySelectorAll('[data-style-name]'); elts.forEach(element => element.dataset.styleName = 'red'); 
Answered on September 1, 2020.
Add Comment

Like this:

const anchor = document.querySelector('[data-style-name="Washed Navy"]'); anchor.setAttribute('data-style-name', 'red') 
Answered on September 1, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.