Looking For A Javascript Solution Equivalent To Below Jquery Solution

I have several buttons on the page and dynamically I am trying to change the color (background) I have written a jQuery it's working on all browsers and changing background color b

Solution 1:

Based on MT0's idea, you can just add a stylesheet to the iframe?

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

[EDIT] 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)";

Whole script :

functionapply_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
}

Solution 2:

Just on a hunch, I tried the following:

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

(specifically..)

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)";

Try each browser - they all show the appropriate gradient. My assumption is that, much like stylesheets, invalid values are ignored. I blew up my IE installation on accident, but this does work on chrome, opera (though it defaults to the webkit version in opera 18), and FF. If this doesn't work on IE after I fix my install, I'll gladly remove this answer.

Solution 3:

Your syntax is off:

obj.style.backgroundColor = 'blue'

Fiddle here