动态添加样式到香草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梯度语法。