How to modify a group of element in Javascript?

Question

Consider this html button tag:

<button type="submit" name="perks_request_status" class="btn-flat disabled btn-small perks_request_status" id="perks_request_status" style="">{{ $perk->status }}</button>

with this following css definition (from the css framework that i am using)

.btn-flat.disabled, .btn-flat.btn-flat[disabled] {
    cursor: default;
    color: #b3b3b3 !important;
    background-color: transparent !important;
}

How can i change/override its style using Javascript? I tried to define style of my id tag perks_request_status using method below but no effect has been reflect.

function changeStatusColor(status, element){
    switch(status){
        case 'Approved':
        element.style.color = '#00796b !important';
        break;
        case 'Drafted':
        element.style.color = '#01579b !important';
        break;
        case 'Cancelled':
        element.style.color = '#b71c1c !important';
        break;
        case 'Disapproved':
        element.style.color = '#d50000 !important';
        break;
    }
}

How about just changing the class name? – Teemu Nov 27 '19 at 07:00 — Teemu, Nov 27 '19 at 07:00
https://stackoverflow.com/a/1577204/4332533 – Freez Nov 27 '19 at 07:11 — Freez, Nov 27 '19 at 07:11

score 0 · Answer 1 · answered Nov 27 '19 at 09:17

0

The reason it is not working is due to the important in the css. To override that we need to use cssText. Please use below code in "changeStatusColor" function then it will work.

element.style.cssText = 'color:red !important';

answered Nov 27 '19 at 09:17

VISHNU

948
8
15

How to modify a group of element in Javascript?

1 Answers1