addClass und className funktioniert nicht in js

Question

hr1 ist die ID einer Zeile, die dynamisch mit JavaScript erstellt wird. Dann habe ich versucht, die Farbe seiner bottom border einzustellen. Wenn ich den Code ausführe, finde ich, dass Version 1 funktioniert, aber Version 2, Version 3, Version 4 und Version 5 funktioniert nicht. Hoffe jemand könnte mir helfen, darauf hinzuweisen, warum das passiert. Vielen Dank im Voraus.

Version 1:

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

Version 2:

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

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

Version 3:

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

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

Version 4:

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

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

Version:

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

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

Answer 1

Nummer 2 funktionieren soll, so ist es wahrscheinlich die CSS, die nicht zutrifft (oder .thing wird durch eine andere CSS-Regel außer Kraft gesetzt). Versuchen Sie, Ihren Selektor .thing spezifischer zu machen.

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

Answer 2

U versuchen Skript auszuführen, bevor das Element gerendert wird bitte wie folgt verwendet.

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

Answer 3

Sie können dies versuchen. über die Schaffung eine hr mit id TestID wie

css

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

JQuery

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

Bitte siehe Beispiel unten Link zum Arbeiten.

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

Answer 4

Kasse All Die Version ...

$("#hr1").css({"border-color": "red","border-width":"4px","border-style":"solid"}); 
 

 
$("#hr2").addClass("thing"); 
 

 
var elm = document.getElementById("hr3"); 
 
elm.className = "thing";

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

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