JavaScriptでのCSSの使用方法

Question

ボタンにカーソルを表示できません。 if-conditionが満たされたときに、JavaScriptを使ってこれをやりたい

if (percent <= 99) 
{ 
//using class name: 
document.getElementsByClassName("btn").style.cursor = "not-allowed"; 

} 
else 
{ 
//using id: 
document.getElementsById("mybtn").style.cursor = "allowed"; 

} 

Answer 1

ありがとうございました@Rayonが言ったことは絶対に正しいです。あなたはオブジェクトのコレクションを返すので、あなたのケースでループを使用する必要があります。

ループを使用したくない場合でもこれを達成したい場合は、究極の解決策はJQueryライブラリを使用することです。 Jqueryライブラリを使用すると、このようにすることができます。

if (percent <= 99) { $(".btn").css("cursor", "not-allowed");} 
else {$("#mybtn").css("cursor", "allowed");} 

これはページ内のすべての要素に適用されます。

Answer 2

カーソルスタイルプロパティがを許可されていません。条件があれば

<button type="button" id="myBtn" class="btn btn-success" title=""></button> 

これが私です：

マイボタンのコードは次のようです。代わりに、のデフォルトのを使用できます。

if (percent <= 99) 
{ 
//using class name: 
document.getElementsByClassName("btn")[0].style.cursor = "not-allowed"; 
//or using id 
document.getElementsById("btn").style.cursor = "not-allowed"; 
} 
else 
{ 
//using class name: 
document.getElementsByClassName("btn")[0].style.cursor = "default"; 
//or using id 
document.getElementsById("btn").style.cursor = "default"; 

} 

Answer 3

ここには、使い始めるのに役立つネイティブJavascriptのコードがあります。

私は、なぜそのが動作していないと思うが、私たちはクラス あなたのスタイルクラスがあるべき加えることでそれを行ってすることができますいけない

var buttons = document.querySelectorAll(".btn"); 

buttons.forEach(button => { 
    percent <= 99 ? (button.style.cursor = "not-allowed") : (button.style.cursor = "allowed"); 
}); 

Answer 4

：どのように私はボタンのCSSを使用する必要があり、誰も私を助けることができる

.btn-disable 
    { 
    pointer-events: none; 
    cursor: not-allowed; 
    filter: alpha(opacity=65); 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    opacity: .65; 
    } 

if (percent <= 99) 
{ 
//using class name: 
document.getElementsByClassName("btn").className += " btn-disable"; 
} 
else 
{ 
//using id: 
document.getElementById("myBtn").classList.remove("btn-disable"); 

}