如何在Javascript中修改一组元素?

Question

考虑这个html按钮标签：

<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定义(来自我正在使用的CSS框架(

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

如何使用Javascript更改/覆盖其样式？我尝试使用以下方法perks_request_status定义id标签的样式，但没有反映任何效果。

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. 请在"更改状态颜色"函数中使用以下代码，然后它将起作用。

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