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]{
	-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">

你能看出我做错了什么吗？为什么没有设置style.backgroundImage？我调试后发现它在那行之后就是空的。

Answer 1

在CSS文件中设置CSS属性。如果您想通过脚本（JavaScript）动态/编程地更改内容，最好的办法是打开/关闭单独的CSS类以进行更改。换句话说，尝试尽可能少地使用JS的.style方法。而是使用JS的.classList。

Answer 2

我刚刚发现我做错了什么..

我忘记在url（）中包装并使用它，而不是event.target：

JSONObject object = ....
incrementValue(object, Arrays.asList("id", "product_id", "category_id", "customer_id"));

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语法。

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

3 个答案: