javascript - 更改另一个元素的 CSS

Question

我有 2 个 View 。我想在第一个元素处于事件状态时更改第二个元素的样式不修改第一个元素

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

这是 2 个元素。当侧边栏处于事件状态时，我希望页面内容在右侧获得 100px 的填充，而不更改侧边栏的任何内容

我知道我能做什么

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

但这会给侧边栏带来 100px 的填充，这是我不想要的。我只想在侧边栏处于事件状态时影响内容。感谢任何帮助

Answer 1

您可以使用纯 CSS 来实现此目的，具体取决于您的 HTML 标记。

解决方案 1(如果 HTML 中 #content 位于 #sidebar 的“旁边”):

.container {
  display: block;
  margin: 10px;
}

#sidebar {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: red;
  display: inline-block;
  vertical-align: top;
  
  margin-left: 0;
}

#content {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: orange;
  display: inline-block;
  vertical-align: top;
}

#sidebar.active + #content {
  padding-right: 100px;
}

<div class="container">
  <div id="sidebar">
    INACTIVE sidebar
  </div>
  <div id="content">
    content
  </div>
 </div>

 <div class="container">
  <div id="sidebar" class="active">
    ACTIVE sidebar
  </div>
  <div id="content">
    content
  </div>
</div>

解决方案 2(如果 HTML 中 #content 是 #sidebar 的子级):

.container {
  display: block;
  margin: 10px;
}

#sidebar {
  /* for demonstration */
  width: ;
  height: 50px;
  background-color: red;
  display: inline-block;
  vertical-align: top;

  margin-left: 0;
}

#content {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: orange;
  display: inline-block;
  vertical-align: top;
}

#sidebar.active #content {
  padding-right: 100px;
}

<div class="container">
  <div id="sidebar">
    INACTIVE sidebar

    <div id="content">
      content
    </div>
  </div>
</div>

<div class="container">
  <div id="sidebar" class="active">
    ACTIVE sidebar
    <div id="content">
      content
    </div>
  </div>
</div>