how to use CSS in JavaScript

Question

I want to show a cursor not allowed option on a button. I want to do this with using CSS in javascript when my if-condition is met.

My button code is like this:

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

this is my if condition:

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

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

}

can anyone help me out, how should i use css for button in javascript. — Deb, May 26 '17 at 05:58
`getElementsByClassName` returns collection hence you are suppose to use `loop` or if you are targeting first element then `[0]` over `getElementsByClassName` and then apply style.. `getElementsById` should work fine.. Correct the typo, it is `getElementById`, it is singular as IDs are always unique.. — Rayon, May 26 '17 at 05:58
For myBtn only: `myBtn.style.cursor = percent <=99 ? 'not-allowed' : 'default';` — Frank Wisniewski, May 26 '17 at 06:17
its not working, i have corrected code to document.getElementById("myBtn").style.cursor = "not-allowed"; — Deb, May 26 '17 at 06:17

Tuhin · Answer 1 · 2017-05-26T06:07:31.703

cursor style property does not have allowed. Instead you can use default.

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

}

score 0 · Accepted Answer · answered May 26 '17 at 06:09

0

Yes according to your question what @Rayon said is absolutely correct. You have to use loop in your case as it returns a collection of objects.

If you don't want to use loops and still want to achieve this, Then the ultimate solution is to use JQuery Library. Using Jquery library you can do like this.

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

this will apply to all the elements with in the page.

answered May 26 '17 at 06:09

Naveen Gogineni

306
2
11

Javascript, not jQuery – Aslam May 26 '17 at 06:13
I think you should first read the answer before commenting. I have already accepted in my reply that this is not the solution as per your requirement which means I am giving suggestion to Mr. Deb that there is another option for achieving this. – Naveen Gogineni May 26 '17 at 06:18
I read your answer. I didn't see anything written like that. Again the question was to use CSS in Javascript. And also using jquery is not the Ultimate Solution. Peace :) – Aslam May 26 '17 at 06:47

score -1 · Answer 3 · answered May 26 '17 at 06:11

-1

Here is the code in native Javascript to help you get started.

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

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

answered May 26 '17 at 06:11

Aslam

9,204
4
35
51

score -1 · Answer 4 · answered May 26 '17 at 06:50

i dont think why its not working, but we can done it by adding a class your style class should be:

.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");

}

how to use CSS in JavaScript

4 Answers4