Question

我的例子如下：

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

检查链接＆＃34; img.youtube.com＆＃34;将添加＆＃34; Class＆＃34;如下图所示：

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

Answer 1

在实现算法时遇到问题时，需要将其拆分为较小的原子任务。在99.9％的案例中，互联网包含了每个任务的答案。

为了将icon-video类添加到特定标记的所有元素或\和具有＆＃34; img.youtube.com＆＃34;的类。在计算出的background-image样式定义中，您需要实际执行以下操作：

首先，您需要找到需要处理的所有候选元素，并且可以包含此链接。例如，所有a标记或具有thumb-post类的所有元素（您应自行选择此标准）：
- window.querySelectorAll @ MDN
迭代这些元素：
- Loop QuerySelectorAll matches @ CSS-Tricks
获取元素的计算背景图像样式值：
- How to get current applied style with js @ SO
- window.getComputedStyle() @ MDN
检查此背景图片是否包含＆＃34; img.youtube.com＆＃34;字符串：
- How to check whether a string contains a substring in JS @ SO
将icon-video添加到每个匹配元素：
- How do I add a class to a given element @ SO

你的举动！

Answer 2

您无需搜索所有<a>元素即可添加icon-video类。您只能使用CSS使用CSS [attribute*=value]选择器来执行此操作。它选择attribute值包含子串"Value"的每个元素。所以：

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

示例：选择<a>包含子字符串style attribute value的每个"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>

添加＆＃34;类＆＃34;检查链接时的属性＆＃34; img.youtube.com＆＃34;

2 个答案: