如何將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; 
} 

工作小提琴：https://jsfiddle.net/mL8g3qLf/

Answer 2

您應該將您想要的CSS添加到單獨的類，然後使用javascript將類指定給新元素。

.target { 
    width: 100px; 
    position: relative; 
    // 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; 
} 

的javascript：

bottomChild.className = 'target'; 

Answer 3

添加類規則，以你的CSS文件，然後將它們用JavaScript是最好的方式做到這一點，雖然有時這是不可行的。

下面介紹如何動態添加樣式。

注意，因爲內嵌樣式具有比外部CSS規則較高的特異性，一個需要使用!important覆蓋風格，如下面的示例

window.onload = function() { 
 

 
    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); 
 

 
    addRule('#bottomChildId::-webkit-scrollbar', 'width: 22px;') 
 

 
    addRule('#bottomChildId::-webkit-scrollbar-track', '-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;') 
 

 
    // Note how this does not work, since inline styles has higher specificity 
 
    addRule('#bottomChildId', 'background: blue') 
 

 
    // !important will be necesarry to override inline style 
 
    addRule('#bottomChildId', 'width: 200px !important') 
 
} 
 

 
function addRule(s, r) { 
 
    if (!hasStyleSheet(document)) return; 
 
    var ss = document.styleSheets[document.styleSheets.length - 1]; 
 
    ss.insertRule(s + ' {' + r + '}', ss.cssRules.length); 
 

 
    function hasStyleSheet(d) { 
 
    if (!d.styleSheets) return false; 
 
    if (!d.styleSheets.length) { 
 
     var style = document.createElement("style"); 
 
     // style.setAttribute("media", "screen") 
 
     style.appendChild(d.createTextNode("")); //Webkit need this 
 
     d.head.appendChild(style); 
 
    } 
 
    return true; 
 
    } 
 
};