Javascript 构造样式-如何通过Chrome扩展（JS/CSS）进行更改_Javascript_Css_Google Chrome_Shadow Dom_Constructable Stylesheet

Javascript 构造样式-如何通过Chrome扩展（JS/CSS）进行更改

javascript css google-chrome

Javascript 构造样式-如何通过Chrome扩展（JS/CSS）进行更改,javascript,css,google-chrome,shadow-dom,constructable-stylesheet,Javascript,Css,Google Chrome,Shadow Dom,Constructable Stylesheet,我有一个网页，这是第三个供应商的应用程序。在这个页面中有很多创建一些构造样式的代码。我想创建一个chrome扩展来在页面上移动一个div。我尝试注入JS和CSS，但它只适用于普通样式，而不是一次构建。如何更改可构造的样式表，例如阴影DOM中div的“width”值更新：replace将根据下面的注释进行操作，但如何找到阴影对象现在是一个问题 <!DOCTYPE html> <html> <body> <script> body = doc

我有一个网页，这是第三个供应商的应用程序。在这个页面中有很多创建一些构造样式的代码。我想创建一个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>


body=document.querySelector（“body”）；
const shadow=body.attachShadow（{mode:'open'}）；
shadow.innerHTML=“New2”；
const bgpulper=new CSSStyleSheet（）；
const everythingTomato=new CSSStyleSheet（）；
替换（`p{font-weight:bold；}`）；
替换（`*{color:tomato；}`）；
shadow.adoptedStyleSheets=[everythingTomato，bgpulper]；
const everythingTomato2=新的CSSStyleSheet（）；
替换（`*{color:red；}`）；
shadow.adoptedStyleSheets=[EverythingTom2]；
/*如何找到“影子”以使用采用的样式表？第一个代码给出的不清楚，我只能修改这一个*/

可构造样式表：

我不是100%确定（没有做太多的工作，他们现在只在Chrome中工作），但我认为你只能在他们身上使用replace和replaceSync

你的代码运行良好；您在全局作用域上声明了

shadow

。如果没有，则：

document.body.shadowRoot

将为您提供引用（不需要对body、head等HTML元素使用querySelector），因为

附加shadow

这两个集合并返回

（this.）shadowRoot

您可以链接所有内容：

super()
  .attachShadow({mode:"open"})
  .innerHTML="Hello Component"

“可构造样式表”是什么意思？您能否提供html/css的一部分，以及希望实现什么。可能需要在一段时间或事件后对html进行修改。可构造样式表：。我不是100%确定（没有做太多，他们现在只在Chrome中工作），但我认为你只能在他们身上使用

replace

和

replaceSync

。是的，你是对的

replace

是答案。现在的问题是如何找到阴影对象以在其上使用它。我将尝试在上面的问题中添加一个示例；您在全局作用域上声明了

shadow

。如果没有，则：

document.body.shadowRoot

将为您提供引用（不需要对

body

，

head

等HTML元素使用querySelector），因为

attachShadow

同时设置和返回（这一点）shadowRoot@Danny“365CSI”Engelman谢谢你！你又对了，shadowRoot是我需要的。我不知道代码附加在哪里，所以我只是在控制台中使用dir（body）找到它，在我的实际情况中，它是在body之后创建的自定义元素。