html - 选择阴影根内的元素
问题描述
我想更改隐藏在阴影根中的元素中的属性。由于项目的性质,我不能直接在 JS 中引用文档,我只能使用自定义类(不适用于 shadow root)或 jQuery,但我不知道如何编写路径元素。
该元素没有“部分”,所以我不能在选择器中使用它。
我已经尝试过 - 我选择了阴影上方的最后一个元素并引用了它的 shadowRoot,然后我尝试通过它的 id 找到封装的元素。我在devtool中测试它,到目前为止没有成功。
$("#root_ptcschartline-7-bounding-box".shadowRoot).find("#chart-line")
.css('padding','100px');
html片段:
解决方案
自 2011 年 IE9 发布以来,不再需要 jQuery 选择器
[element].querySelector( selector )
使用相同的符号
let div = document.querySelector("#root_ptcschartline-7-bounding-box");
给你<div>
let chartLine = div.querySelector("ptcs-chart-line");
给你<ptcs-chart-line>
元素let shadow = chartline.shadowRoot;
为您提供 shadowRoot 参考let layout = shadow.querySelector("#chart-layout")
给你<ptcs-chart-layout>
元素
全部结合
let layout = document
.querySelector("#root_ptcschartline-7-bounding-box ptcs-chart-line")
.shadowRoot
.querySelector("#chart-layout");
layout.style.padding = "100px";
推荐阅读
- spring-boot - Spring Boot Multi Module Gradle Project 类路径问题:Package Not Found, Symbol not Found
- arrays - 使用 Laravel 从数据库中返回嵌套的 Json 作为数组
- javascript - TypeError: undefined is not a function ('...data.map...' 附近)
- networking - route print 命令显示几乎所有 On-link 网关
- javascript - 如何将用户分配到组并使用 Firestore 引用字段类型对其进行排序
- r - 使用 purrr 和 modelr 从剂量反应模型 (drm) 进行预测
- oracle - 为什么 Oracle Apex 在从 4 迁移到 19 后停止使用 Google 验证码?
- python - 带有特殊字符和文本的正则表达式
- javascript - 宜家带引导程序的画布菜单
- vb.net - 使用 ASP.NET Core MVC 将多行插入数据库