javascript - 如何在 Javascript 中修改一组元素？

Question

考虑这个 html button 标签:

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

使用以下 css 定义(来 self 正在使用的 css 框架)

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

如何使用 Javascript 更改/覆盖其样式？我尝试使用下面的方法定义我的 id 标签 perks_request_status 的样式，但没有反射(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;
    }
}

Answer 1

它不起作用的原因是由于 css 中的 important。要覆盖它，我们需要使用 cssText。 请在“changeStatusColor”函数中使用以下代码，然后它将起作用。

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