如何使用JavaScript将伪元素直接设置为html

Question

我必须解决一个挑战，它要求我在一个JS文件中编写所有的html、css和JS。我很难弄清楚如何使用JS将伪元素设置为"div"。

设置div的代码是：

let myDiv = document.createElement('div')
myDiv.className = 'cart-container'
myDiv.style.cssText = "height: 440px; width: 400px; margin: auto; overflow-y:auto;"

在CSS中，伪元素看起来像这样：

.cart-container::-webkit-scrollbar{
width: 10px;
}
.cart-container::-webkit-scrollbar-thumb{
border-radius: 5px;
background-color: #30808d;
height: 100px;
}

如何使用JS而不是CSS将CSS代码插入到我的"div"中？

Answer 1

您可以使用CSSStyleSheet.insertRule()方法为伪元素插入样式。我在下面添加了一个关于如何使用它的小例子：

document.styleSheets[0].insertRule("::-webkit-scrollbar { width: 100px; background-color: green; }");

#test {
height: 2000px;
background-color: red;
}

<div id="test"></div>