时间戳

首页 > 解决方案 > 2 级子节点的 Javascript 样式更改

javascript - 2 级子节点的 Javascript 样式更改

问题描述

我有一个像这张照片一样的案例

在此处输入图像描述

我知道元素 1 的唯一 id，元素 2 id 不是唯一的，因此需要作为子节点访问，并且元素 2 内的 div 没有任何唯一标识符，因此也必须作为子节点访问

到目前为止，我尝试过这样的事情

`document.querySelector(`tr.${current_id} > td.color > div`).setAttribute('style', 'background-color: rgb(0,0,255);');`

但得到“无法读取 null 的集合属性”，所以它不起作用。知道如何用纯 JS 和最简单的方式执行此操作吗？

Jquery 也是一种选择，但理想情况下希望仅使用 JS 来执行此操作。

标签： javascriptdom

解决方案

我真的不知道为什么，但是通过这样做我发现querySelector停止抱怨并且还找到了正确的子节点 div。如果有人通过定义querySelector工作的父节点遇到类似的问题

let group = document.getElementById(current_id);
group.querySelector(`td#color > div`).setAttribute('style', 'background-color: rgb(0,0,255);');

参考问题中的图片，group变量是标记为 1 的元素。

PS。感谢@caramba 纠正我的元素引用格式

推荐阅读