如何在 javascript 中获取 html 元素的邻居？ [复制]答案

【问题标题】：How can I get the neighbor of an html element in javascript? [duplicate]如何在 javascript 中获取 html 元素的邻居？ [复制]
【发布时间】：2021-03-24 20:58:09
【问题描述】：

示例 html：

<div class="container" id="neighbor-color-div">
        <button id="change-neighbour-color" onclick="change_neighbor_color()">Change my 
        neighbour color!</button>
        <button id="neighbour">Click the other button!</button>
</div>
<script src="./main.js" defer></script>

示例 main.js：

function change_neighbor_color() {
 ...
}

我不知道该怎么做，但是当我点击“change-neighbor-color” id 按钮后，另一个按钮的文本颜色应该变为蓝色。

感谢您的帮助。

【问题讨论】：

标签： javascript html css dom styles

【解决方案1】：

通用方式

您可以在函数调用处传递对使用this调用函数的按钮的引用

 <button id="change-neighbour-color" onclick="change_neighbor_color(this)">

那么你就有了对被调用按钮元素的引用 e.target;

然后使用querySelectorAll() 获取所有按钮
遍历所有按钮并通过比较它的ID来检查调用该函数的btn在哪个索引处。
最好是当您想要涉及的按钮具有相同的类名时。

那么您的邻居将成为索引 +1 处的按钮

        function change_neighbor_color(e) {
           let index;
           let nodes = document.querySelectorAll(".btn");
           nodes.forEach((n, ind) => {
           if(n.id === e.id){
           index = ind;
           }
           })
           
           if(index !== undefined && index !== null){
              nodes[index+1].style.color = "blue";
            }else{
           console.log("NO NEIGHBOUR FOUND");
            }

 
            }

     <div class="container" id="neighbor-color-div">
                    <button id="change-neighbour-color" class="btn" onclick="change_neighbor_color(this)">Change my 
                    neighbour color!</button>
                    <button id="neighbour" class="btn">Click the other button!</button>
            </div>
            <script src="./main.js" defer></script>

非通用方式 通过id 访问neighbour 元素，并使用.style.color

为其赋予颜色蓝色

document.getElementById("neighbour").style.color = "blue";

    
    function change_neighbor_color() {
document.getElementById("neighbour").style.color = "blue";
}

<div class="container" id="neighbor-color-div">
        <button id="change-neighbour-color" onclick="change_neighbor_color()">Change my 
        neighbour color!</button>
        <button id="neighbour">Click the other button!</button>
</div>
<script src="./main.js" defer></script>

【讨论】：

虽然这行得通，但我很确定希望采用更通用的方法。 如何在 javascript 中获取 html 元素的邻居？
好名字@JavaScript 对于更通用的方式，您可以使用类名和 querySelectorAll，然后所需的元素邻居位于索引 [elementIndex -1] [elementIndex +1]
注意使用setAttribute() 的第二个建议，它将删除所有现有的内联样式。如果还需要标记中的样式，则两者的组合会更稳定。
你会如何组合它们？
您首先分配属性，然后使用style.cssText 设置属性。或者，您可以只添加一个类，这是当今的常见做法。

【解决方案2】：

function change_neighbor_color() {
 document.getElementById('neighbour').style.color= 'blue';
}

【讨论】：

为什么把它改成红色？
它被要求输入文本颜色而不是背景颜色
我已经解决了，谢谢