如何通過javascript更改CSS偽元素？

Question

我的網頁隨機生成一種顏色，某些元素（如輸入）通過javascript生成顏色作為邊框。 像這樣：

document.getElementById('input').style.color = color;

問題是我想從<input type="range" />中獲取一個拇指來生成隨機顏色，而我不知道該怎么做，嘗試並在網上搜索時找不到解決方法來獲取此CSS樣式input[type=range]::-webkit-slider-thumb javascript中的input[type=range]::-webkit-slider-thumb 。

誰能幫我嗎？ 提前致謝。

Answer 1

更改偽元素樣式的最簡單方法是在JavaScript或JQuery中添加和刪除類。 這是一個例子：

CSS：

.newClass::-webkit-slider-thumb{
    color:red;
}

JS解決方案：

要添加類：

document.getElementById("selector").classList.add('newClass');

刪除課程：

document.getElementById("selector").classList.remove('newClass');

jQuery解決方案：

要添加類：

$("#selector").addClass("newClass");

刪除課程：

$("#selector").removeClass("newClass");

Answer 2

好吧，我終於做到了，我不知道我所做的是否是好的編程，但是無論如何它都能工作，我需要添加一個css規則，因此可以這樣做：

document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-thumb 
{ background-color:' + color + ' !important; }', 0);

我終於能夠操縱偽元素（至少在chrome中，下一步是其他主要瀏覽器）。 無論如何，我認為這對於想要嘗試此類操作的人很有幫助，我需要進行搜索並嘗試了許多方法來做到這一點。

感謝所有試圖幫助我的人。