javascript - 覆盖 span 元素的边框样式

Question

我尝试了以下 JavaScript/jQuery 代码来更改边框粗细。

但这行不通。请帮助我。

//$("span").css({"border":"4px solid green"});
document.getElementById("192.168.42.151:8984_solr").getElementsByClassName("trees_shard1_replica_n1").find("span").style.borderWidth = "thick";

.card {
  position: relative;
  display: inline-block;
  margin: 10px;
}

.card a {
  padding-right: 8px;
}

.card a span {
  border-radius: 1.25rem;
  border: 1px solid green;
}

.card a .replicaActive {
  color: transparent;
  background-color: transparent;
}

.card a .replicaLeader {
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body" id="192.168.42.151:8984_solr">
    <a href="#" class="trees_shard1_replica_n1">
      <span class="badge replicaActive">0</span>
    </a>
  </div>
</div>
<div class="card">
  <div class="card-body" id="192.168.1.4:8983_solr">
    <a href="#" class="trees_shard1_replica_n3">
      <span class="badge replicaLeader">0</span>
    </a>
  </div>
</div>

镜子:https://jsfiddle.net/amitkushwaha1710/asdxfc94/44/

Answer 1

你的 id 属性有问题，id="192.168.42.151:8984_solr

id attribute must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

改变它，它就会起作用。

你可以做类似的事情

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
  <div class="card-body" id="192.168.42.151:8984_solr">
    <a href="#" class="trees_shard1_replica_n1">
      <span class="badge replicaActive">0</span>
    </a>
  </div>
</div>
<div class="card">
  <div class="card-body" id="192.168.1.4:8983_solr">
    <a href="#" class="trees_shard1_replica_n3">
      <span class="badge replicaLeader">0</span>
    </a>
  </div>
</div>

$('.card-body').find(".trees_shard1_replica_n1").find("span").css({'color':'red'});