构造样式-如何通过Chrome扩展更改(JS/CSS)
提问于 2020-11-07 21:18:34
我有一个网页，这是第三个供应商的应用程序。在这个页面中有很多创建一些构造样式的代码。我想创建一个chrome扩展来在页面上移动其中一个div。我试图注入JS和CSS，但它只适用于普通样式，而不是一次构造。我能做什么来改变一个可构造的样式表，例如在阴影DOM中的div的"width“值？
更新:根据下面的评论，replace将完成一项工作，但如何找到阴影对象现在是一个问题
<!DOCTYPE html>
<html>
<body>
<script>
body = document.querySelector("body");
const shadow = body.attachShadow( {mode: 'open'});
shadow.innerHTML = "<p>New2</p>";
const bgPurple = new CSSStyleSheet();
const everythingTomato = new CSSStyleSheet();
bgPurple.replace(`p {font-weight: bold; }`);
everythingTomato.replace(`* { color: tomato; }`);
shadow.adoptedStyleSheets = [everythingTomato, bgPurple];
</script>
<script>
const everythingTomato2 = new CSSStyleSheet();
everythingTomato2.replace(`* { color: red; }`);
shadow.adoptedStyleSheets = [everythingTomato2];
/*How to find "shadow" to use adoptedStyleSheets? The first code is given not clear, I can only change this one. */
</script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2020-11-08 20:24:53
可构造StyleSheets：https://developers.google.com/web/updates/2019/02/constructable-stylesheets
我不是100%确定(我没有做太多的工作，他们现在只能在Chrome中工作)，但我认为你只能在他们上使用replace和replaceSync
您的代码运行良好；您在全局作用域上声明了shadow。如果没有，那么：document.body.shadowRoot将为您提供引用(不需要在body、head等HTML元素上使用querySelector )，因为attachShadow既设置并返回(this.)shadowRoot
您可以链接所有内容：
super()
.attachShadow({mode:"open"})
.innerHTML="Hello Component"页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64732523
复制相关文章
点击加载更多
腾讯云开发者
