Javascript 更改另一个元素的CSS

我有两种观点。我想在第一个元素处于活动状态时更改第二个元素的样式，而不修改第一个元素

#sidebar.active {
  margin-left: 0 !important;
}   
#content{
  padding-right:100px;
}

这是两个要素。当侧边栏处于活动状态时，我希望页面内容在右侧得到100px的填充，而不改变侧边栏中的任何内容

我知道我能做什么

#sidebar.active , ##content {
  margin-left: 0 !important;
  padding-right:100px;
}   

---

但是这会给边栏一个100px的填充，这是我不想要的。我只想在侧边栏处于活动状态时影响内容。非常感谢您的帮助

您可以使用纯CSS实现这一点，具体取决于您的HTML标记。

解决方案1（如果HTML中的#内容位于#侧边栏的“下一个”位置）：

.container{
显示：块；
利润率：10px；
}
#边栏{
/*示范*/
宽度：100px；
高度：50px；
背景色：红色；
显示：内联块；
垂直对齐：顶部；
左边距：0；
}
#内容{
/*示范*/
宽度：100px；
高度：50px；
背景颜色：橙色；
显示：内联块；
垂直对齐：顶部；
}
#侧栏.活动+#内容{
右边填充：100px；
}

非活动侧栏
所容纳之物
活动侧栏
所容纳之物

要在纯css中实现这一点，您的两个元素必须在DOM中相互关联。是吗？如果是，怎么做？你能给我们看一个他们的标记的例子吗？寻求代码帮助的问题必须包括在问题中重现它所需的最短代码，最好是在一个简单的文本中。看见