javascript 设置多个样式值

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>

javascript:

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

并将其绑定(bind)到您的进度元素:

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