Add the "class" attribute when checking that the link "img.youtube.com"

Question

My example is below:

<a class="thumb-post" href="#" style="background-image:url(https://img.youtube.com/vi/hKRUPYrAQoE/maxresdefault.jpg)"></a>

Checking the link "img.youtube.com" will add the "Class" as shown below:

<a class="thumb-post icon-video" href="#" style="background-image:url(https://img.youtube.com/vi/hKRUPYrAQoE/maxresdefault.jpg)"></a>

Hello, and welcome to Stack Overflow. Are you trying to ask how to do this? You really need to [edit] your question to show some code where you are attempting to do this so that we can see where you are stuck. You should also indicate how similar previous questions do not have answers which are suitable for your needs. — tripleee, Jun 13 '18 at 04:49
Are you trying to add class attribute while clicking the link? — Tej, Jun 13 '18 at 04:54
This question is not valid, unfortunately, we can't help you write code from scratch. — James Wong, Jun 13 '18 at 05:00

score 0 · Answer 1 · answered Jun 13 '18 at 05:04

When you meet a problem while implementing an algorithm, you need to split it into smaller atomic tasks. In 99.9% of cases, the Internet contains the answers for each of these tasks.

In order to add icon-video class to all elements of specific tag or\and class having "img.youtube.com" in their computed background-image style definition, you need to actually do the following:

First, you need to find all candidate elements which need to be processed and can contain this link. For example, all a tags or all elements having thumb-post class (you should choose this criteria yourself):
- window.querySelectorAll @ MDN
Iterate through these elements:
- Loop QuerySelectorAll matches @ CSS-Tricks
Get an element's computed background-image style value:
- How to get current applied style with js @ SO
- window.getComputedStyle() @ MDN
Check if this background-image contains a "img.youtube.com" string:
- How to check whether a string contains a substring in JS @ SO
Add icon-video to every matching element:
- How do I add a class to a given element @ SO

Your move!

score 0 · Answer 2 · answered Jun 13 '18 at 06:17

You don't need to have search all <a> element to add the icon-video class. You can do it only with CSS, by using CSS [attribute*=value] Selector. It selects every element whose attribute value contains the substring "Value". So:

a[style*="img.youtube.com"] {
    /* This is the same as .icon-video class */
}

Example: Selects every <a> element whose style attribute value contains the substring "img.youtube.com".

.thumb-post {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px;
    background-size: cover;
    border: 3px solid blue
}

.thumb-post[style*="img.youtube.com"] {
    border: 3px solid red
}

<a class="thumb-post" href="#" style="background-image:url(https://img.youtube.com/vi/hKRUPYrAQoE/maxresdefault.jpg)"></a>
<a class="thumb-post" href="#" style="background-image:url(https://img.youtube.com/vi/hKRUPYrAQoE/maxresdefault.jpg)"></a>
<a class="thumb-post" href="#" style="background-image:url(myimage.jpg)"></a>
<a class="thumb-post" href="#" style="background-image:url(https://img.youtube.com/vi/hKRUPYrAQoE/maxresdefault.jpg)"></a>
<a class="thumb-post" href="#" style="background-image:url(https://unsplash.it/3000/3000/?random)"></a>

Add the "class" attribute when checking that the link "img.youtube.com"

2 Answers2