[JQUERY] jQuery.css ( "backgroundColor")를 16 진수 형식으로 반환 할 수 있습니까?

jQuery.css ( "backgroundColor")를 16 진수 형식으로 반환 할 수 있습니까?

해결법

1. ---

   1.색상은 항상 RGB로 반환됩니다 (이미 16 진수에서 반환되는 IE6 제외). 그런 다음 기본적으로 다른 형식으로 되돌릴 수 없습니다.

   색상은 항상 RGB로 반환됩니다 (이미 16 진수에서 반환되는 IE6 제외). 그런 다음 기본적으로 다른 형식으로 되돌릴 수 없습니다.

   당신이 말했듯이, 헥스를 RGB로 변환하는 기능을 작성할 수 있습니다. 다음은이 기능을 작성하는 방법에 대한 몇 가지 예제가있는 주제가 있습니다. RGB 값보다는 16 진수 색상 값을 얻는 방법은 무엇입니까?

   그러나 이미 jQuery를 직접 반환하는 방법이 있는지 궁금해합니다. 대답은 예, jQuery 1.4.3 이후 CSS 후크를 사용하여 가능합니다.

   코드는 다음과 같아야합니다.

   $.cssHooks.backgroundColor = {
       get: function(elem) {
           if (elem.currentStyle)
               var bg = elem.currentStyle["backgroundColor"];
           else if (window.getComputedStyle)
               var bg = document.defaultView.getComputedStyle(elem,
                   null).getPropertyValue("background-color");
           if (bg.search("rgb") == -1)
               return bg;
           else {
               bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
               function hex(x) {
                   return ("0" + parseInt(x).toString(16)).slice(-2);
               }
               return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
           }
       }
   }
   

   그리고 $ ( "강조 표시된"라고 부를 때 CSS ( "backgroundColor"), 반환은 # f0ff05가됩니다. 여기에 작동하는 샘플이 있습니다.

2. ---

   2.이것은 에릭 Petrucelli의 답변의 약간 조정 된 버전입니다. RGBA를 처리하는 것으로 보입니다.

   이것은 에릭 Petrucelli의 답변의 약간 조정 된 버전입니다. RGBA를 처리하는 것으로 보입니다.

               $.cssHooks.backgroundColor = {
               get: function (elem) {
                   if (elem.currentStyle)
                       var bg = elem.currentStyle["backgroundColor"];
                   else if (window.getComputedStyle)
                       var bg = document.defaultView.getComputedStyle(elem,
                           null).getPropertyValue("background-color");
                   if (bg.search('rgba') > -1) {
                       return '#00ffffff';
                   } else {
                       if (bg.search('rgb') == -1) {
                           return bg;
                       } else {
                           bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                           function hex(x) {
                               return ("0" + parseInt(x).toString(16)).slice(-2);
                           }
                           return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
                       }
                   }
               }
           };
   

3. ---

   3.

   function RGBAToHexA(test:string) {
   let sep = test.toString().indexOf(",") > -1 ? "," : " ";
   const rgba = test.toString().substring(5).split(")")[0].split(sep);
   console.log(rgba)
   let r = (+rgba[0]).toString(16),
     g = (+rgba[1]).toString(16),
     b = (+rgba[2]).toString(16),
     a = Math.round(+rgba[3] * 255).toString(16);
   
       if (r.length == 1)
           r = "0" + r;
       if (g.length == 1)
           g = "0" + g;
       if (b.length == 1)
           b = "0" + b;
       if (a.length == 1)
           a = "0" + a;
   
   return "#" + r + g + b + a;}
   

   이 코드는 나에게 잘 작동하며, Jasmine Protractor를 사용하고 있으며 요소의 GetCsValue를 시도 할 때 RGB 형식을 얻었습니다.

   it('should check color  of login btn', async function(){
       browser.waitForAngularEnabled(true);
       browser.actions().mouseMove(element(by.css('.btn-auth, .btn-auth:hover'))).perform(); // mouse hover on button
       csspage.Loc_auth_btn.getCssValue('color').then(function(color){
           console.log(RGBAToHexA(color))
           expect( RGBAToHexA(color)).toContain(cssData.hoverauth.color);
   
       })
      // expect(csspage.Loc_auth_btn.getCssValue('color')).toContain(cssData.hoverauth.color);
   })
   

from https://stackoverflow.com/questions/6177454/can-i-force-jquery-cssbackgroundcolor-returns-on-hexadecimal-format by cc-by-sa and MIT license