在 for 循环内分组并根据样式属性修改 span 元素

grouping inside a for loop & modifying span elements according to style attribute

本文关键字：样式 属性 修改 元素 span 循环 for      更新时间：2023-09-26

我在页面上有一组 span 元素。它们使用从后端接收的一些信息进行定位，并且 style 属性会随着先前的 javascipt 执行而相应更改。

它就像一张地图。

地图上有几个景点，每个景点都有一个名字。但有些地方可能有几个名字。

<span class="myimages" id="tag-14" style="position: absolute; left: 191px; top: 217px;">hello</span>
<span class="myimages" id="tag-15" style="position: absolute; left: 141px; top: 112px;">bye</span>
<span class="myimages" id="tag-16" style="position: absolute; left: 191px; top: 217px;">welcome</span>
<span class="myimages" id="tag-17" style="position: absolute; left: 50px; top: 12px;">lunch</span>

我想做的是我想在这个对象数组中创建组，以便我可以根据需要修改它们。

我想做一些

事情，比如创建一个数组，然后获取共享相同属性（相同位置）的数组，然后做一些只会影响那组 span 元素而不会影响其他元素的事情。

我能够完成的第一部分：

function foam()
    {
    var menus = document.getElementsByClassName("myimages");
         for (var i=0; i < menus.length ; i++)
            {
                menuposition = menus[i].getAttribute("style");
                menus[i].setAttribute('style', menuposition+'background-color:pink;');
            }
    }

但这当然会改变每个元素的 style 属性，我希望能够在循环内创建一个循环，或者创建条件或其他东西来实现这一点。

提前谢谢。

更新：我无法自动分配类名。位置信息来自一个平面列表："点名称，点名称在图像上坐标"，只有告诉一个点相同的信息是x&y坐标...这在某种程度上是有限的，但事实就是如此。

此外，我会修改一些属性，而不仅仅是更改背景颜色。

首先，您不应该使用 style 属性来实际更改元素的样式。您应该使用 style 对象属性，因此您执行以下操作：

menus[i].style.backgroundColor = "pink";

这将保留其余的样式属性，因为它们都列在 style 对象中。即使您想要设置的所有样式属性的列表，您也可以使用 menus[i].style.cssText ，这在较旧的 IE （<8 IIRC） 中不可用，但这不会有问题，因为我看到您正在使用 getElementsByClassName .

然后，让我们看看你的问题。如果您认为可以依赖<span>坐标，则可以像这样过滤掉它们：

var menus = document.getElementsByClassName("myimages");
for (var i=0; i < menus.length ; i++) {
    if (menus[i].style.left === x + "px" && menus[i].style.top === y + "px") {
        menus[i].style.backgroundColor = "pink";
    }
}

这会将背景颜色"粉红色"分配给具有相同left和top样式属性（等于 x 和 y 像素）的所有图像。也许它不完全是你想要的（请多解释一下），也许您可能希望将条件限制为仅left属性，或者top。

但是我的建议是最终为元素设置另一个样式类，以便所有工作都可以变得更容易，甚至完全通过CSS。需要明确的是：

<span class="myimages group-1" id="tag-14">hello</span>
<span class="myimages group-2" id="tag-15">bye</span>
<span class="myimages group-1" id="tag-16">welcome</span>
<span class="myimages group-3" id="tag-17">lunch</span>

这是相关的 CSS：

.myimages {position: absolute;}
.group-1 {
    left: 191px;
    top: 217px;
    background-color: pink;
}
...

除了实际动态分配类之外，别无他法。

相关文章：