Получить элемент CSS3 градиент цвета фона с помощью JS - PullRequest
Новая
       18

Получить элемент CSS3 градиент цвета фона с помощью JS

4 голосов
/ 08 мая 2011

В настоящее время я использую следующий JS (jQuery), чтобы найти цвет фона (как rgb) нескольких других div: 

$theColor = $(this).css("background-color");

Он отлично работает, за исключением градиентов CSS3.

В качестве примера, у меня есть следующий CSS, чтобы фон div был похож на заметку post-it: 

background: #FFFAAD; /* old browsers */

background: -moz-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D)); /* webkit */

background: gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D));

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFAAD', endColorstr='#FFF47D',GradientType=0 ); /* ie */

jQuery, похоже, ничего не берет.

Как я могу использовать jQuery, чтобы найти хотя бы один из цветов, используемых в градиенте css3?Я относительно новичок в JS, поэтому, пожалуйста, потерпите меня ...

Спасибо.

Ответы [ 3 ]

2 голосов
/ 09 мая 2011

Как указано, используйте CSS-хуки , чтобы сделать это.

Вы найдете образец с вашими потребностями здесь: http://www.webmuse.co.uk/articles/csshooks-in-jquery/.

2 голосов
/ 09 мая 2011

Вам нужно создать cssHook для градиента (например, в jQuery реализована ловушка для непрозрачность ).

См .: http://api.jquery.com/jQuery.cssHooks/

Как и просил пример кода для получения цветов: 

(function($){   

    if ( !$.cssHooks ){
        //if not, output an error message
        alert("jQuery 1.4.3 or above is required for this plugin to work");
        return;
    }
    div = document.createElement( "div" ),
    css = "background-image:gradient(linear,left top,right bottom, from(#9f9), to(white));background-image:-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-moz-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-o-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-ms-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-khtml-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:linear-gradient(left top,#9f9, white);background-image:-webkit-linear-gradient(left top,#9f9, white);background-image:-moz-linear-gradient(left top,#9f9, white);background-image:-o-linear-gradient(left top,#9f9, white);background-image:-ms-linear-gradient(left top,#9f9, white);background-image:-khtml-linear-gradient(left top,#9f9, white);";    
    div.style.cssText = css;


    $.support.linearGradient =
    div.style.backgroundImage.indexOf( "-moz-linear-gradient" )  > -1 ? '-moz-linear-gradient' :
    (div.style.backgroundImage.indexOf( "-webkit-gradient" )  > -1 ? '-webkit-gradient' :
    (div.style.backgroundImage.indexOf( "linear-gradient" )  > -1 ? 'linear-gradient' : false));
    if ( $.support.linearGradient)
    {
      $.cssHooks['linearGradientColors'] = { 
        get: function(elem){
          var currentStyle=$.css(elem, 'backgroundImage'),gradient,colors=[];
          gradient=currentStyle.match(/gradient(\(.*\))/g);
          if(gradient.length)
          {
            gradient=gradient[0].replace(/(linear|radial|from|\bto\b|gradient|top|left|bottom|right|\d*%)/g,'');
            colors= jQuery.grep(gradient.match(/(rgb\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return jQuery.trim( s )!=''})
          }
          return colors;
        }
    };
 }
})(jQuery);

Как я уже сказал, это всего лишь пример работы с cssHooks, не предназначенный для производственного использования.У меня работает в ff, chrome, IE9, safari.Функция набора может быть найдена, если вы перейдете по ссылке, размещенной RickV.

Использование: $('selector').css('linearGradientColors')
Возврат: массив с цветами

0 голосов
/ 09 мая 2011

Вы можете извлечь цвета, используемые в градиенте, посмотрев на свойство background-image элемента, а затем выделив перечисленные цвета. Вот пример , он использует соответствие цвета RegEx из этого поста . Я только что привязал код к событию onclick элементов с фоном: 

$("div").bind("click", function() {
    window.alert('Background color: ' + ($(this).css('background-color')));
    var re = /(#([0-9A-Fa-f]{3,6})\b)|(aqua)|(black)|(blue)|(fuchsia)|(gray)|(green)|(lime)|(maroon)|(navy)|(olive)|(orange)|(purple)|(red)|(silver)|(teal)|(white)|(yellow)|(rgb\(\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*,\s*\b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\b\s*\))|(rgb\(\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*,\s*(\d?\d%|100%)+\s*\))/g;
    var colors = ($(this).css('background-image')).match(re);
    for (var i=0; i < colors.length; i++) {
        window.alert('Gradient colour: ' + colors[i]);
    }
});

Обратите внимание, что RegEx предназначен для цветов CSS2, поэтому он не будет соответствовать ни одному из цветов rgba() или hsla(), но при необходимости вы можете расширить его.

...