動態添加樣式到香草js不工作的元素

Question

我想自定義類型範圍的輸入欄，但出於某種原因，我還沒有弄清楚，backgroundImage沒有被設置。

我在做什麼：

var age = document.querySelector('#age'); 
var ageResult = document.querySelector('#age-result'); 
ageResult.textContent = age.value; 
age.addEventListener('change', function(event) { 
    var value = (event.target.value - event.target.min)/(event.target.max - event.target.min); 
    this.style.backgroundImage = '-webkit-gradient(linear, left top, right top, ' 
              + 'color-stop(' + value + ', #e8972c), ' 
              + 'color-stop(' + value + ', #e6e6e6) ' 
              + ')'; 
    if (event.target.tagName === 'INPUT') { 
     ageResult.textContent = event.target.value; 
    } 
}) 

這裏是代碼片段：

var age = document.querySelector('#age'); 
 
    age.addEventListener('change', function(event) { 
 
     var value = (event.target.value - event.target.min)/(event.target.max - event.target.min); 
 
     this.style.backgroundImage = '-webkit-gradient(linear, left top, right top, ' 
 
               + 'color-stop(' + value + ', #e8972c), ' 
 
               + 'color-stop(' + value + ', #e6e6e6) ' 
 
               + ')'; 
 
    })

input[type=range]{ 
 
\t -webkit-appearance: none; 
 
\t /* fix for FF unable to apply focus style bug */ 
 
\t border: 1px solid white; 
 
} 
 
input[type=range]:focus { 
 
\t outline: none; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
\t background: #ccc; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
\t -webkit-appearance: none; 
 
\t border: none; 
 
\t height: 30px; 
 
\t width: 30px; 
 
\t border-radius: 50%; 
 
\t background: #ffffff; 
 
\t margin-top: -11px; 
 
\t background-image: linear-gradient(rgba(255,255,255,0),rgba(0,0,0,0.1)); 
 
\t box-shadow: 0 0 8px rgba(0,0,0,0.3); 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
\t height: 10px; 
 
\t background: #dddddd; 
 
\t border: none; 
 
\t border-radius: 3px; 
 
}

<input type="range" name="age" id="age" min="14" max="70" value="31">

你能看到什麼，我做錯了什麼？爲什麼沒有設置style.backgroundImage？我調試了一下，發現它在該行之後是空的。

Answer 1

在您的CSS文件中設置您的CSS屬性。如果您想通過腳本（JavaScript）動態/編程地更改某些內容，最好的方法是打開/關閉單獨的CSS類以進行更改。換句話說盡量少用JS的.style方法。而是使用JS的.classList。

Answer 2

我剛剛發現我在做什麼錯..

我忘記內部URL包裹（），並用這個，而不是event.target：

event.target.backgroundImage = 'url(-webkit-gradient(linear, left top, right top, ' 
               + 'color-stop(' + value + ', #e8972c), ' 
               + 'color-stop(' + value + ', #e6e6e6) ' 
               + '))'; 

Answer 3

試試這個它會爲工作您。

var age = document.querySelector('#age'); 
    age.addEventListener('change', function(event) { 
     var value = (event.target.value - event.target.min)/(event.target.max - event.target.min); 
     this.style.backgroundImage = `-webkit-gradient(linear,center bottom,center top,from(green),color-stop(0.5, yellow),to(blue))`; 
    }) 

所以這個問題不是JavaScript而是你的webkit梯度語法。