动态添加样式到香草js中的元素不起作用

Question

I am trying to customize the bar of an input of type range but, for some reason I didn't figure out yet, the backgroundImage is not being set.

What I am doing:

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

Here is the code snippet:

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

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

Can you see what I am doing wrong? Why does the style.backgroundImage isn't being set? I debugged and saw that it is empty right after that line.

Answer 1

Set your CSS properties in your CSS file. If you want to change something dynamically/programatically via a script (JavaScript) your best bet is to toggle a separate CSS class on/off to make the change. In other words try and use JS's .style method as little as possible. Instead use JS's .classList .

Answer 2

I just found out what I was doing wrong..

I was forgetting to wrap inside url() and using this, instead event.target:

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

Answer 3

Try this it will work for you.

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

So the problem is not with javascript but your webkit-gradient syntax.