javascript - 如何将CSS添加到Javascript中？

Question

假设这是我的 javascript 代码:

var bottomChild = document.createElement('div');
bottomChild.id = 'bottomChildId';
bottomChild.style.width = '100px';
bottomChild.style.position = 'relative';
bottomChild.style.overflowY = 'scroll';
bottomChild.style.background = 'red';
bottomChild.style.top = '0px';
bottomChild.style.borderLeft = '0px solid #E4E7EA';
bottomChild.style.height = '200px';
document.body.appendChild(bottomChild);

现在我想将以下 css 添加到 bottomChild 中:

::-webkit-scrollbar {
    width: 22px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

请帮助将这些 css 添加到动态 javascript div 中。

Answer 1

您可以像这样添加类 - div(id).className = 'target';

在你的情况下添加:

bottomChild.className = 'target';

Js:

var bottomChild = document.createElement('div');
bottomChild.id = 'bottomChildId';
bottomChild.style.width = '100px';
bottomChild.style.position = 'relative';
bottomChild.style.overflowY = 'scroll';
bottomChild.style.background = 'red';
bottomChild.style.top = '0px';
bottomChild.style.borderLeft = '0px solid #E4E7EA';
bottomChild.style.height = '200px';
bottomChild.className = 'target';
document.body.appendChild(bottomChild);

CSS:

.target {
    background:#000000 !important;
    // etc.
}
.target::-webkit-scrollbar {
    width: 22px;
}
.target::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

工作 fiddle :https://jsfiddle.net/mL8g3qLf/