バニラの要素にスタイルを動的に追加する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

私はちょうど私が間違って何をしていたかが分かった。..

私はevent.targetの代わりに、（URL内のラップを忘れる）と、これを使用していた。

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-gradientの構文にあります。