Question

我在页面上有一组span元素。它们的位置包含从后端接收的一些信息，并且样式属性随之前的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＆amp; y坐标...它在某种程度上有所限制，但情况确实如此。

另外，我只修改了一些属性，而不仅仅是改变背景颜色。

Answer 1

首先，您不应该使用style属性来实际更改元素的样式。您应该使用style 对象属性，这样就可以：

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

这样可以保留剩余的样式属性，因为它们都列在style对象中。即使您想要设置所有样式属性的列表，也可以使用menus[i].style.cssText，这在旧的IE（＆lt; 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;
}
...

除了真正动态地分配课程之外别无他法。

在for循环中分组＆amp;根据style属性修改span元素

1 个答案: