如何到达<span>内部的 html 标签</span><div>使用 Java 脚本？</div><div id="text_translate"><p> 我有一个放置在div内的span标签，如下所示：</p><pre> &lt;div onclick="doActiveCheckBox('color1')" id="sss" class="test form-check form-option form-check-inline mb-2"&gt; &lt;input class="test form-check-input" type="radio" name="color" id="color1" data-bs-label="colorOption" value="/تاریک" checked=""&gt; &lt;label class="form-option-label rounded-circle" for="color1"&gt;&lt;span style="border:inherit; border-block-color:purple;" class="form-option-color rounded-circle" style="background-image: url(/img/ProductColors/green1.jpg)"&gt;&lt;/span&gt;&lt;/label&gt; &lt;/div&gt;</pre><p> 我想在单击input标签时为span标签设置border ，并且也不想在span中使用任何id 。 我尝试了以下方法：</p><p> 1：</p><pre> var d=document.getElementById("sss").getElementsByTagName("span"); d.style.border = "thick solid #0000FF";</pre><p> 2：</p><pre> var d=document.getElementById("sss").getElementsByClassName(); for (var i = 1; i &lt;= d.length; i++) { d[1].style.border = "thick solid #0000FF"; }</pre><p> 但他们都没有正常工作？ 那么有人会帮忙吗？</p></div>

Question

我有一个放置在div内的span标签，如下所示：

<div onclick="doActiveCheckBox('color1')" id="sss"  class="test form-check form-option form-check-inline mb-2">
     <input class="test form-check-input" type="radio" name="color" id="color1" data-bs-label="colorOption" value="/تاریک" checked="">                                
     <label class="form-option-label rounded-circle" for="color1"><span style="border:inherit; border-block-color:purple;"  class="form-option-color rounded-circle" style="background-image: url(/img/ProductColors/green1.jpg)"></span></label>
</div>

我想在单击input标签时为span标签设置border ，并且也不想在span中使用任何id 。 我尝试了以下方法：

1：

        var d=document.getElementById("sss").getElementsByTagName("span");
        d.style.border = "thick solid #0000FF";

2：

        var d=document.getElementById("sss").getElementsByClassName();
        for (var i = 1; i <= d.length; i++) {
            d[1].style.border = "thick solid #0000FF";
        }

但他们都没有正常工作？ 那么有人会帮忙吗？

Answer 1

我建议使用 querySelector： const d = document.querySelector("#sss span");

然后你可以添加样式： d.style.border = "thick solid #0000FF";

Answer 2

  var d=document.getElementById("sss").getElementsByTagName("span");
                                                 ^//returns an array
d.get.style.border = "thick solid #0000FF";//d[0].style
//┗━━┛ 

没有一个名为get的属性，因此访问第一个元素，因为 getElementsByTagName 返回一个数组。

Answer 3

要获得跨度，您可以这样做

var span = document.querySelector("#sss label span");
//do whatever you want with the span

Answer 4

Jquery 方法（如果需要）

var span = $("#sss label span");
span.css("border", "thick solid #0000FF");

或者如果您不使用#sss 只是输入（可能会得到多个结果）

var span = $("input.form-check label span");

Answer 5

您可以执行这些步骤来获取任何HTML ELEMENT并使用CSS对其进行样式设置，或通过document.querySelector使用JS使用它
1.

2.

3.