我想像在本网站上一样通过 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)+"%)";
问题:
如何设置浏览器兼容性的其他属性?我认为覆盖数组不会有帮助。
最佳答案
这是我为您编写的 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";
关于javascript 设置多个样式值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21958658/