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

寻找一个等同于jQuery解决方案的javascript解决方案

3 个答案: