javascript - addClass 和 className 在 js 中不起作用

Question

hr1 是使用 JavaScript 动态创建的行的 id。然后我尝试设置它的bottom border的颜色。当我运行代码时，我发现版本 1 可以运行，但版本 2、版本 3、版本 4 和版本 5 不运行。希望有人能帮我指出为什么会这样。先感谢您。

版本 1:

$('#hr' + 1).css("border-bottom-color", "red");

版本 2:

js:
$('#hr' + 1).addClass('thing');

css:
.thing {
    border-bottom-color: red;
}

版本 3:

js:
$('#hr' + 1).className = "thing";

css:
.thing {
    border-bottom-color: red;
}

版本 4:

js:
$('#hr' + 1).attr('class', "thing");

css:
.thing {
    border-bottom-color: red;
}

版本 5:

js:
$('#hr' + 1).setAttribute('class', "thing");

css:
.thing {
    border-bottom-color: red;
}

Answer 1

第 2 条应该有效，所以可能是您的 CSS 不适用(或者 .thing 被其他一些 css 规则覆盖)。尝试使您的选择器 .thing 更具体。

.hr {
  height: 2px;
  border-bottom: 1px solid #000;
  margin: 0 0 10px;
}

.thing {
  border-bottom-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hr1" class="hr"></div>
<div id="hr2" class="hr"></div>
<div id="hr3" class="hr"></div>
<button onClick='$("#hr1").addClass("thing")'>Change color</button>