js如何给目标元素的兄弟元素更改样式

Posted 2023-04-01

找到目标元素的父元素，再找到它的子元素即可：
目标元素.parentNode.childNode
然后再通过循环给每个元素更改样式即可。当然这里面也包括了目标元素，要不要排除掉就看你了
也可以直接找目标元素的兄弟元素，但这要分两步走：往前找和往后找，除非目标元素是所有兄弟里面的老大或老幺，倒不如通过老爸直接找到所有兄弟来得更快更方便。 参考技术A

先获取兄弟节点对象，然后再修改样式。如：

var s= document.getElementById("test");
var ns=s.nextSbiling;   //获得s的下一个兄弟节点
var ps=s.previousSbiling;  //得到s的上一个兄弟节点
ns.style.color='red';//字体颜色
ps.className='red';//更改class属性

用jQuery也封装了，很多操作样式的方法。

使用 CSS 更改兄弟悬停时的元素样式

【中文标题】使用 CSS 更改兄弟悬停时的元素样式

【英文标题】：Changing element style on sibling hover with CSS

【发布时间】：2012-01-22 12:49:49

【问题描述】：

我有以下结构：

<div id="e1">
  <h1>Header</h1>
  <div id="main">text text text text</div>
  <div id="footer">something</div>
</div>

我希望<h1> 变成蓝色，例如当页脚悬停时。我知道我可以用 Javascript 做到这一点，但我想知道你是否知道一些 CSS 技巧来做到这一点。

谢谢！

【问题讨论】：

我不确定 CSS3，但在标准 CSS 中，除非页眉是页脚的子元素，否则您不能这样做。

使用纯 CSS，我不相信这是可能的，但我可能错了。

@Justin Satyr：CSS3 选择器现在可以被视为“标准 CSS”，因为几个月前该模块已标准化为 W3C 推荐标准。

【参考方案1】：

您的 h1 位于 #footer 之前，因此纯 CSS 无法实现，因为它不提供选择器来匹配前面的同级元素。

【讨论】：

你可能是对的。我最接近解决方案的是：jsfiddle.net/bVPqx/1。但是在选择器中切换 div 和 h1 角色是不行的。

在选择器中切换角色是什么意思？

使用 "#e h1:hover~#footer" 可以，但使用 "#e #footer:hover~h1" 不行：jsfiddle.net/bVPqx/3

【参考方案2】：

我以某种方式实现了它，不改变 html 结构和纯 CSS。

在 jsfiddle 中查看：http://jsfiddle.net/ijse/dhcqw/

【参考方案3】：

#e1:hover 
      color:red;


#main, #footer
    color:black 

另一种选择。