时间戳

首页 > 解决方案 > 使用 Javascript，我如何定位和更改没有 ID 或类的图像的 URL？

javascript - 使用 Javascript，我如何定位和更改没有 ID 或类的图像的 URL？

问题描述

如何更改深埋在 div 中的 URL，并且仅当存在 parent>parent>parent div 的类时才更改它的 URL。

上下文：我正在尝试更改滚动时更改其背景颜色的粘性标题中的徽标图像。当更改的状态处于活动状态时，其中一个父 div 添加了一个名为“.bt-active”的类。

像这样，正常的状态代码是：

<section class="bdt-sticky">
<div data-id="208ba95" class=" element  element-208ba95  logo  widget  widget-image" id=" logo" data-element_type="image.default">
    <div class=" widget-container">
        <div class=" image">
            <a href="https://site.uk/" data- open-lightbox=""><img src="logo-1.png" class="attachment-full size-full" alt="" width="180" height="26"></a>
        </div>
    </div>
</div>

粘性激活时的代码是：

<section class="bdt-sticky bdt-active">
<div data-id="208ba95" class=" element  element-208ba95  logo  widget  widget-image" id=" logo" data-element_type="image.default">
    <div class=" widget-container">
        <div class=" image">
            <a href="https://site.uk/" data- open-lightbox=""><img src="logo-1.png" class="attachment-full size-full" alt="" width="180" height="26"></a>
        </div>
    </div>
</div>

我想将处于活动状态的徽标更改为 src="logo-2.png"

标签： javascript

解决方案

img 确实有课。其中几个。如果它们由您可能不想定位的其他图像共享，您只需查看其祖先以通过后代和/或子组合器添加更多特异性。

document.querySelector与这些选择器中的任何一个一起使用都会以 为目标img，并且限制性越来越强：

.attachment-full
.attachment-full.size-full
.image .attachment-full
.image .attachment-full.size-full
.image > .attachment-full.size-full
.image > .attachment-full
.widget-container .attachment-full
.widget-container .attachment-full.size-full
.widget-container .image .attachment-full
.widget-container .image .attachment-full.size-full
.widget-container > .image > .attachment-full.size-full

你明白了。:-)

如果你喜欢，你可以把它放在img前面.attachment-full来限制img元素。

您还可以定位src属性：

[src="logo-1.png"]

这可以与上述任何一种结合使用（例如：）img[src="logo-1.png"].attachment-full。

选择器规格

现场示例：

function check(selector) {
    console.log(selector + " => " + document.querySelector(selector) ? "found" : "not found");
}

check(".attachment-full");
check(".attachment-full.size-full");
check(".image .attachment-full");
check(".image .attachment-full.size-full");
check(".image > .attachment-full.size-full");
check(".image > .attachment-full");
check(".widget-container .attachment-full");
check(".widget-container .attachment-full.size-full");
check(".widget-container .image .attachment-full");
check(".widget-container .image .attachment-full.size-full");
check(".widget-container > .image > .attachment-full.size-full");
<section class="bdt-sticky">
    <div data-id="208ba95" class=" element  element-208ba95  logo  widget  widget-image" id=" logo" data-element_type="image.default">
        <div class=" widget-container">
            <div class=" image">
                <a href="https://example.com/" data- open-lightbox=""><img src="https://via.placeholder.com/150x150/0000FF/808080?text=Example" class="attachment-full size-full" alt=""></a>
            </div>
        </div>
    </div>
</section>

推荐阅读