将 bootstrap-div 边框颜色更改为 javascript

Question

我正在尝试更改 div 的边框颜色，但在 div 上使用 bootstrap class 时它不起作用。如何使用 javascript 更改此边框颜色？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">



<div class="p-1 border bg-light" align="center" id="101">No</div>


<script type="text/javascript">
    document.getElementById("101").style.border = "1px solid #ff0000"; // Change in not made
    document.getElementById("101").innerHTML = "Yes"; // Change is made
</script>

Answer 1

您需要使用 setAttribute 来设置 javascript 中的样式。我在这里添加了 !important，因为 bootstrap 有 class 边框，它覆盖了内联 CSS。为了给予内联高优先级，我添加了 !important.

document.getElementById("101").setAttribute('style', 'border:1px solid #ff00ff !important');// Change is  made now
    document.getElementById("101").innerHTML = "Yes"; // Change is made

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">



<div class="p-1 border bg-light" align="center" id="101">No</div>

正如@penguin 所建议的，我们也可以使用 cssText。

document.getElementById("101").style.cssText +=  'border:1px solid red!important';// Change is  made now
    document.getElementById("101").innerHTML = "Yes"; // Change is made

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">



<div class="p-1 border bg-light" align="center" id="101">No</div>

将 bootstrap-div 边框颜色更改为 javascript

Change bootstrap-div border color with javascript

javascript

bootstrap-5