Ищите решение javascript, эквивалентное приведенному ниже решению jQuery

0

У меня есть несколько кнопок на странице и динамически я пытаюсь изменить цвет (фон)

Я написал 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";
  • 1
    JQuery является родным JS.
  • 0
    Почему вы удалили jQuery?
Показать ещё 5 комментариев
Теги:

3 ответа

2
Лучший ответ

Основываясь на идее 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
}
  • 0
    Я сделал это, но эта идея не принята в проекте; ищем применение всех градиентов браузера, таких как jQuery, используя синтаксис javascript.
  • 0
    Смотрите редактировать. backgroundImage вместо backgroundColor? obj.style.backgroundImage = "-webkit-linear-Градиент (слева, синий, синий)";
Показать ещё 2 комментария
1

Как раз на догадку, я попробовал следующее:

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 (хотя по умолчанию это версия webkit в opera 18) и FF. Если это не работает в IE после исправления моей установки, я с радостью удалю этот ответ.

  • 0
    это сработало, и я выбрал ответ Армеля; это лучше всего подходит.
-2

Ваш синтаксис выключен:

obj.style.backgroundColor = 'blue'

Скриншот здесь

  • 0
    Оба синтаксиса будут работать. obj.style ['background-color'] = obj.style.backgroundColor. Я не -1
  • 0
    да, но obj.style.backgroundColor ["- webkit-linear-Gradient"] не работает
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню