寻找与下面的jQuery解决方案等效的JavaScript解决方案

问题描述

页面上有几个按钮，并且我正在动态地尝试更改颜色(背景)

I have several buttons on the page and dynamically I am trying to change the color (background)

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

I have written a jQuery it's working on all browsers and changing background color based on the CSS param passed to the function.

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

I am looking for a javascript way of changing the button color that should be working on all browsers similar to the below jQuery implementation.

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方式，没有运气；请帮忙.如果我的问题不清楚，请发表评论.我会编辑.我正在寻找可以使按钮(背景色)呈线性渐变的语法.

I have tried javascript way, no luck; please help. Please leave a comment if my question isn't clear. I will edit. I am looking for the syntax that can take linear-gradients for button (background color).

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

推荐答案

基于MT0的想法，您可以仅向iframe添加样式表吗?

Based on MT0's idea, you can just add a stylesheet to the 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函数

For linear gradient, you should use background-image not background-color and set the value to the css function

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
}

这篇关于寻找与下面的jQuery解决方案等效的JavaScript解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！