Question

我想通过javascript设置渐变，就像在这个网站上http://www.mediaevent.de/css/gradient.html

一样

目标：

<div style="background-image: -webkit-linear-gradient(white 0%, #9FBFD2 100%); 
            background-image: -moz-linear-gradient(white 0%, #9FBFD2 100%); 
            background-image: -o-linear-gradient(white 0%, #9FBFD2 100%); 
            background-image: linear-gradient(white 0%, #9FBFD2 100%);">
</div>

javascipt：

var progress_ele = document.getElementById("progress");    
progress_ele.style["background-image"] = "-webkit-linear-gradient(left, "+this.color+" "+(this.percent-2)+"%, white "+(this.percent+2)+"%)";

问题：

如何设置浏览器兼容性的其他属性？我不认为覆盖阵列会有所帮助。

Answer 1

这是我为你写的JSFiddle代码： http://jsfiddle.net/SwZv6/1/

您可以为内联样式创建CSS类，如下所示：

.progress {
    width:100%;
    height:20px;
    background-image: -webkit-linear-gradient(white 0%, #9FBFD2 100%); 
    background-image: -moz-linear-gradient(white 0%, #9FBFD2 100%); 
    background-image: -o-linear-gradient(white 0%, #9FBFD2 100%); 
    background-image: linear-gradient(white 0%, #9FBFD2 100%);
}

并将其绑定到您的进度元素：

var progress_ele = document.getElementById("progress"); 
progress_ele.className = "progress";

Answer 2

var progress_ele = document.getElementById("progress");    
progress_ele.style["background-image"] = "-webkit-linear-gradient(left, "+this.color+" "+(this.percent-2)+"%, white "+(this.percent+2)+"%),
-moz-linear-gradient(left, "+this.color+" "+(this.percent-2)+"%, white "+(this.percent+2)+"%),
-o-linear-gradient(left, "+this.color+" "+(this.percent-2)+"%, white "+(this.percent+2)+"%),
linear-gradient(left, "+this.color+" "+(this.percent-2)+"%, white "+(this.percent+2)+"%)";

试试这个。

Answer 3

为什么不尝试直接设置style属性？

progress_ele.setAttribute("style", "background-image: -webkit-linear-gradient(white 0%, #9FBFD2 100%); background-image: -moz-linear-gradient(white 0%, #9FBFD2 100%); background-image: -o-linear-gradient(white 0%, #9FBFD2 100%); background-image: linear-gradient(white 0%, #9FBFD2 100%);")

javascript设置了多个样式值

3 个答案: