寻找相当于以下 jQuery 解决方案的 javascript 解决方案

Question

我在页面上有几个按钮，我正在尝试动态更改颜色（背景）

我编写了一个 jQuery，它可以在所有浏览器上运行，并根据传递给函数的 CSS 参数更改背景颜色。

我正在寻找一种更改按钮颜色的 javascript 方法，该方法应该适用于所有浏览器，类似于下面的 jQuery 实现。

function apply_Color(iframe,CSSParams){

var buttonColor = CSSParams.buttonColor;
var buttonHoverBackgroundColor = CSSParams.buttonHoverBackgroundColor;

jQuery(iframe).contents().find('.search-button').css({
'background': buttonColor,
'background-image': '-moz-linear-gradient(top,' + buttonColor + ' 0%,' + buttonColor + ' 100%)', /* FF3.6+*/
'background-image': '-webkit-gradient(linear, left top, left bottom, color-stop(0%, ' + buttonColor + '), color-stop(100%, ' + buttonColor + '))', /* Chrome,Safari4+ */
'background-image': '-webkit-linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)', /* Chrome10+,Safari5.1+ */
'background-image': '-o-linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)', /* Opera 11.10+ */
'background-image': '-ms-linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)', /* IE10+ */
'background-image': 'linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)'/* W3C */
 });

jQuery(iframe).contents().find('.p-search-button').hover(function() {
 jQuery(this).css
 ({
 'background': buttonHoverBackgroundColor ,
 'background-image': '-moz-linear-gradient(top,' + buttonHoverBackgroundColor + ' 0%,' + buttonHoverBackgroundColor + ' 100%)', /* FF3.6+*/
 'background-image': '-webkit-gradient(linear, left top, left bottom, color-stop(0%, ' + buttonHoverBackgroundColor + '), color-stop(100%, ' + buttonHoverBackgroundColor + '))', /* Chrome,Safari4+ */
 'background-image': '-webkit-linear-gradient(top, ' + buttonHoverBackgroundColor + ' 0%, ' + buttonHoverBackgroundColor + ' 100%)', /* Chrome10+,Safari5.1+ */
 'background-image': '-o-linear-gradient(top, ' + buttonHoverBackgroundColor + ' 0%, ' + buttonHoverBackgroundColor + ' 100%)', /* Opera 11.10+ */
 'background-image': '-ms-linear-gradient(top, ' + buttonHoverBackgroundColor + ' 0%, ' + buttonHoverBackgroundColor + ' 100%)', /* IE10+ */
 'background-image': 'linear-gradient(top, ' + buttonHoverBackgroundColor + ' 0%, ' + buttonHoverBackgroundColor + ' 100%)'/* W3C */
 });
});
}

我尝试过javascript方式，没有运气；请帮忙。如果我的问题不清楚，请发表评论。我会编辑。我正在寻找可以为按钮（背景颜色）采用线性渐变的语法。

obj.style.backgroundColor["-webkit-linear-gradient"] = "blue";
obj.style.backgroundColor = "red";

Answer 1

根据 MT0 的想法，你可以在 iframe 中添加一个样式表吗？

function applyCss(iframe,stylesheet_url){
    var link = document.createElement("link") 
    link.href = "style.css"; 
    link.rel = "stylesheet"; 
    link.type = "text/css"; 
    iframe.document.body.appendChild(cssLink);
}

[编辑] 对于线性渐变，您应该使用背景图像而不是背景颜色并将值设置为 css 函数

obj.style.backgroundImage = "-webkit-linear-gradient(left,blue,blue)";

整个脚本：

function apply_Color(iframe,CSSParams){

    var buttonColor = CSSParams.buttonColor;
    var buttonHoverBackgroundColor = CSSParams.buttonHoverBackgroundColor;

    var els = iframe.document.getElementsByClassName('.search-button');

    for(var i = 0; i<els.length; i++){
        els[i].style.background = buttonColor;
        els[i].style.backgroundImage = '-moz-linear-gradient(top,' + buttonColor + ' 0%,' + buttonColor + ' 100%)';
        els[i].style.backgroundImage = '-webkit-gradient(linear, left top, left bottom, color-stop(0%, ' + buttonColor + '), color-stop(100%, ' + buttonColor + '))';
        els[i].style.backgroundImage = '-webkit-linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)';
        els[i].style.backgroundImage = '-o-linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)';
        els[i].style.backgroundImage = '-ms-linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)';
        els[i].style.backgroundImage = 'linear-gradient(top, ' + buttonColor + ' 0%, ' + buttonColor + ' 100%)';
    }
    // same goes for hover
}

Answer 2

凭直觉，我尝试了以下方法：

http://jsfiddle.net/FzU3V/2/

（特别是..）

target.style.background = "red";
target.style.background = "-moz-linear-gradient(top, blue, red)";
target.style.background = "-webkit-linear-gradient(top, green, red)";
target.style.background = "-o-linear-gradient(top, black, red)";

尝试每个浏览器 - 它们都显示适当的渐变。我的假设是，就像样式表一样，无效值会被忽略。我不小心炸毁了我的 IE 安装，但这确实适用于 chrome、opera（尽管它在 opera 18 中默认为 webkit 版本）和 FF。如果在我修复安装后这在 IE 上不起作用，我很乐意删除这个答案。

Answer 3

您的语法已关闭：

obj.style.backgroundColor = 'blue'

小提琴here