Блог

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

 $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, поэтому, пожалуйста, потерпите меня..

Спасибо.

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

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

Вам нужно будет создать 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|btob|gradient|top|left|bottom|right|d*%)/g,'');
            colors= jQuery.grep(gradient.match(/(rgb([^)] )|#[a-zd]*|[a-z]*)/g),function (s) { return jQuery.trim( s )!=''})
          }
          return colors;
        }
    };
 }
})(jQuery);
  

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

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

Вы можете извлечь цвета, используемые в градиенте, просмотрев background-image свойство элемента, а затем извлекая перечисленные цвета. Вот пример, в нем используется регулярное выражение CSS color matching из этого поста. Я только что привязал код к 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])bs*,s*b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])bs*,s*b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])bs*))|(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]);
    }
});
  

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