尋找一個JavaScript的解決方案等同於下面的jQuery解決方案

我在網頁上有幾個按鈕，動態我試圖改變顏色（背景）尋找一個JavaScript的解決方案等同於下面的jQuery解決方案

我已經寫了一個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";

來源

2013-12-15 user1769790

jQuery是原生JS。 – floww

你爲什麼要移除jQuery？ – Jerska

@Jerska一個網站的要求，沒有jQuery。項目需要不是有jQuery :( – user1769790

基於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 
}

來源

2013-12-15 22:01:52

我已經完成了這項工作，但是這個想法在項目中不被接受;尋找使用JavaScript語法來應用所有瀏覽器漸變，如jQuery。 – user1769790

請參閱編輯。 backgroundImage而不是backgroundColor？ obj.style.backgroundImage =「-webkit-linear-gradient（left，blue，blue）」; –

現在應該工作 –

-2

你的語法關：

obj.style.backgroundColor = 'blue'

小提琴here

來源

2013-12-15 21:53:23

兩種語法都可以工作obj.style [ 'background-color'] = obj.style.backgroundColor。我沒有-1 –

yes，但是obj.style.backgroundColor [「 - webkit-linear-gradient」 ]不起作用 –

小提琴在FF中不起作用。需要backgroundColor。 – Stephen

剛在預感，我試過以下：

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都有效。如果在修復我的安裝後，這不起作用，我會很樂意刪除這個答案。

來源

2013-12-15 22:17:21 Stephen

這工作，我選擇了阿梅爾的答案;這是最合適的。 – user1769790

尋找一個JavaScript的解決方案等同於下面的jQuery解決方案

回答

相關問題