使用javascript更改类的css规则

Question

我有一个奇怪的问题，但没有找到解决方案。我需要用javaScript改变类的css规则（比如border-color）。

我们认为我有一堆像这样的div：

.patient{
  border: 1px solid blue;
  width: 100px;
  height:30px;
  margin:5px
}
.patient.active{
  border-color : red;
}

<div class="patient active"></div>
<div class="patient"></div>
<div class="patient"></div>
<div class="patient"></div>
<div class="patient"></div>

现在，用户应该能够以每当div变为活动状态时更改'.active'border-color，它将新值视为我已经更改了css文件中的css规则。当我设置border-color时，它会像内联样式一样添加到选定的div