寻找与下面的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'

在这里摆弄