Javascript 替代跨度图元的边框样式

我尝试了以下JavaScript/jQuery代码来更改边框的厚度

但这是行不通的。请帮帮我

//$span.css{border:4px纯绿色}； document.getElementById192.168.42.151:8984_solr.getElementsByClassNametrees_shard1_replica_n1.findspan.style.borderWidth=thick； .卡片{ 位置：相对位置； 显示：内联块； 利润率：10px； } .卡a{ 右边填充：8px； } .卡一个跨度{ 边界半径：1.25雷姆； 边框：1px纯绿色； } .卡a.激活{ 颜色：透明； 背景色：透明； } .卡片a.领队{ 背景色：000； }

---

id属性中存在问题，id=192.168.42.151:8984\u solr

id属性必须以字母[a-Za-z]开头，后面可以跟在后面 由任意数量的字母、数字[0-9]、连字符、下划线组成 _、冒号：、和句点

改变它，它就会工作

你可以这样做

<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'});

---

您无法在javascript中通过find找到元素，因此可以按照以下方法进行操作

//$span.css{border:4px纯绿色}； var solrId=document.getElementById192.168.42.151:8984_solr.getElementsByClassName'trees_shard1_replica_n1'[0]； solrId.getElementsByTagNamespan[0]。style.borderWidth=thick； .卡片{ 位置：相对位置； 显示：内联块； 利润率：10px； } .卡a{ 右边填充：8px； } .卡一个跨度{ 边界半径：1.25雷姆； 边框：1px纯绿色； } .卡a.激活{ 颜色：透明； 背景色：透明； } .卡片a.领队{ 背景色：000； } 您的代码是错误的，基本上是jquery和javascript的混合

试试这个：不需要jquery

document.getElementsByClassNametrees\u shard1\u replica\u n1[0]。查询选择器'span'。style.borderWidth=thick； .卡片{ 位置：相对位置； 显示：内联块； 利润率：10px； } .卡a{ 右边填充：8px； } .卡一个跨度{ 边界半径：1.25雷姆； 边框：1px纯绿色； } .卡a.激活{ 颜色：透明； 背景色：透明； } .卡片a.领队{ 背景色：000； }

---

像这样？.find不是一个DOM方法，而是一个jQuery方法-但是您在这里没有使用jQuery对象。您还忽略了从列表getElementsByClassName中首先返回一个特定元素。document.getElementById192.168.42.151:8984_solr.getElementsByClassNametrees_shard1_replica_n1[0]。getElementsByTagNamespan[0]可以工作，如果您真的需要/想要编写非常静态和不灵活的代码。您可能会发现javascript代码中的id需要转义\\。但我无法更改它。还有其他解决方案吗？“id属性中的问题”-不太可能，HTML5已经解除了大部分限制。-至少有一个字符，没有空格-就是这样。@misorude只有数字可以工作，但数字后面的冒号不能工作。不正确。这应该适用于任何不太过时的半正式浏览器。

var replicaNodeName="192.168.42.151:8984_solr";
$(document.getElementById(replicaNodeName)).find(".trees_shard1_replica_n1").find("span").css({'border':'4px solid green'});