addClass和className在js中不起作用

hr1是使用JavaScript動態創建的一行代碼。然後我試着設置其bottom border的顏色。當我運行代碼時，我發現版本1可以運行，但版本2，版本3，版本4和版本5不起作用。希望有人能幫我指出爲什麼會發生這種情況。先謝謝你。addClass和className在js中不起作用

版本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; 
}

來源

2016-11-24 zxc34

版本3不起作用，因爲您要添加className屬性來一個jQuery對象，而不是DOM節點本身。你將不得不爲'版本2'添加重要的'$（「＃id」）[0] .className =「thing」' – hampusohlsson

爲CSS添加重要'border-bottom-color：red; ！重要;''''''類 –

js中的所有東西都在js中工作，不要責怪js：v –

數字2應該工作，所以它可能是你的CSS不適用（或某些其他css規則重寫.thing）。嘗試使您的選擇器.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>

來源

2016-11-24 05:00:03 hampusohlsson

我不認爲這是原因。我從Govind那裏得到了我提出的建議！到CSS，但它仍然無法正常工作。 – zxc34

@ zxc34如果您正在處理包含動態內容的大型項目，使用太多！重要可能會很麻煩。 –

-1

U正試圖在元素呈現之前運行腳本，請使用像這樣。

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

來源

2016-11-24 04:59:51

您沒有閱讀過這個問題。 –

你可以試試這個。通過像

CSS與ID testId創建小時

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

jQuery的

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

請參閱以下鏈接工作示例。

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

來源

2016-11-24 05:12:25

結帳所有的版本...

$("#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>

來源

2016-11-24 05:17:39

我希望我可以接受兩個答案。謝謝。 – zxc34

addClass和className在js中不起作用

回答

相關問題