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>

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