Question

我有以下代码：

<div class="className" id="div-1" onClick="selPic(this.id);">
   <span>some text</span>
</div>
<div class="className" id="div-2" onClick="selPic(this.id);">
   <span>some text</span>
</div>
<div class="className" id="div-3" onClick="selPic(this.id);">
   <span>some text</span>
</div>

我想给点击元素的范围赋予一些样式，但我更喜欢使用父元素的id作为参考，而不是给每个span一个id。

我试过这个，但它不起作用：

function selPic(id) {
    document.getElementById(id).childNone[0].style.opacity = "1";
}

有什么想法吗？

Answer 1

只需更正代码中的拼写错误：

function selPic(id) {
    document.getElementById(id).childNodes[0].style.opacity = "1";
}

Answer 2

访问childNodes（而不是childNode）数组的元素1以修改span opacity：

document.getElementById(id).childNodes[1].style.opacity = "1";

Answer 3

将childNone替换为childNodes。

function selPic(id) {
    document.getElementById(id).childNodes[0].style.opacity = "1";
}

Answer 4

它应该是 childNodes 而不是childNode：

function selPic(id) {
    document.getElementById(id).childNodes[0].style.opacity = "1";
}

另外，习惯使用返回功能：

function selPic(id) {
   var ss = document.getElementById(id).childNodes[0].style.opacity = "1";
   return ss;
}

Answer 5

您有一些错误代码

function selPic(id) {
document.getElementById(id).childNodes[0].style.opacity = "1";
}

Answer 6

您按索引号选择子节点的想法通常不起作用。那是因为你无法确定span元素的数量。根据您构建列表的方式，在您感兴趣的范围之前可能存在不可见的子节点，例如空白文本节点。这就是为什么你惊讶地发现你必须使用索引值1而不是0。

更强大的方法是在父元素上调用getElementsByTagName('span')以检索其中的所有跨度。然后获取返回数组中的第一项。

另外，我建议函数的参数应该是要突出显示的元素，而不仅仅是元素的ID。如果您遵循我的建议，您的HTML将如下所示：

<div class="className" id="div-1" onClick="selectPicture(this);">
   <span>some text</span>
</div>
<div class="className" id="div-2" onClick="selectPicture(this);">
   <span>some text</span>
</div>
<div class="className" id="div-3" onClick="selectPicture(this);">
   <span>some text</span>
</div>

功能如下：

function selectPicture(container) {
    container.getElementsByTagName('span')[0].style.opacity = 1;
}

通过修改范围的className并编写适当的CSS来实现样式更改会更好，但我会将这些注意事项留给您。

从element获取childnode

6 个答案: