У меня есть несколько кнопок на странице и динамически я пытаюсь изменить цвет (фон)
Я написал 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";
Основываясь на идее 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);
}
[EDIT] Для линейного градиента вы должны использовать фоновое изображение без фонового цвета и установить значение функции 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
}
Как раз на догадку, я попробовал следующее:
(В частности,..)
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 (хотя по умолчанию это версия webkit в opera 18) и FF. Если это не работает в IE после исправления моей установки, я с радостью удалю этот ответ.