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不适用（或者。某些其他css规则会覆盖它）。尝试使您的选择器.thing更具体。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你可以试试这个。通过创建ID testId 之类的 hr

css

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

Jquery的

$(document).ready(function() {   $("#testId").addClass("thing") });

请参阅以下链接了解工作示例。

https://jsfiddle.net/mohan_rathour/2h779793/3/ 1

Answer 3

结帐所有版本......

＆＃13;

$("#hr1").css({"border-color": "red","border-width":"4px","border-style":"solid"});

$("#hr2").addClass("thing");

var elm = document.getElementById("hr3");
elm.className = "thing";

＆＃13;

.div1{
  height:50px;
  width:50px;
   background-color:cyan;
}
.thing{
  border-color:red;
  border-width:4px;
  border-style:solid;
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Version 1 :
<div id="hr1" class="div1">
</div>

Version 2 :
<div id="hr2" class="div1">
</div>

Version 3 :
<div id="hr3" style="height:50px;width:50px;background-color:cyan;">
</div>

＆＃13;

Answer 4

你试图在渲染元素之前运行脚本，请像这样使用。

$(document).ready(function () {
        $('#hr' + 1).css("border-bottom-color", "red");
    });

addClass和className在js中不起作用

4 个答案: