时间戳

首页 > 解决方案 > 使用 javascript 更改 bootstrap-div 边框颜色

javascript - 使用 javascript 更改 bootstrap-div 边框颜色

问题描述

我正在尝试更改 div 的边框颜色，但在 div 上使用引导类时它不起作用。如何使用 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>

标签： javascriptbootstrap-5

解决方案

您需要使用 setAttribute 在 javascript 中设置样式。我在此处添加了!important，因为引导程序具有覆盖内联 CSS 的类边框。为了给予 inline 高优先级，我添加了!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>

推荐阅读