cssHooks : 하나의 함수에서 여러 CSS 선택기

Question

이 함수는 cssHooks를 사용하여 배경색의 rgb 색상을 HEX 값으로 변환합니다. 내 질문은 이것입니다, 나는 또한 경계 - 색상과 텍스트 색상을하고 싶습니다. 3 개의 개별 기능을 생성해야합니까, 아니면 결합 할 수 있습니까?

편집 : 여기에는 3 가지 기능이 있습니다. 나는이 모든 것을 하나로 결합하려고 힘들게 노력하고있다. 코드를 더 깔끔하게 만드는 것이다. 어떻게 3을 모두 하나의 고리로 결합 할 수 있습니까?

이 모든 값을 입력 ... 단지 개별하지 CSS 선택기를 변경

$.cssHooks.backgroundColor = { 
get: function(elem) { 
    if (elem.currentStyle) 
     var bg = elem.currentStyle["background-color"]; 
    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]); 
    } 
} 
} 

$.cssHooks.borderColor = { 
get: function(elem) { 
    if (elem.currentStyle) 
     var bg = elem.currentStyle["border-color"]; 
    else if (window.getComputedStyle) 
     var bg = document.defaultView.getComputedStyle(elem, 
      null).getPropertyValue("border-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]); 
    } 
} 
} 

$.cssHooks.color = { 
get: function(elem) { 
    if (elem.currentStyle) 
     var bg = elem.currentStyle["color"]; 
    else if (window.getComputedStyle) 
     var bg = document.defaultView.getComputedStyle(elem, 
      null).getPropertyValue("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]); 
    } 
} 
} 

Answer 1

...

$.cssHooks.colorz = { 
get: function(elem, rule) { 
if (elem.currentStyle) 
    var bg = elem.currentStyle[rule]; 
else if (window.getComputedStyle) 
    var bg = document.defaultView.getComputedStyle(elem, 
     null).getPropertyValue(rule); 
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]); 
} 
} 
} 

Answer 2

당신은 이런 식으로 작업을 수행 할 수 있습니다 당신은 3 개 변수를 사용할 수 있습니다

function _register_jquery_get_hex_color(newname,styleattr) { 
    $.cssHooks[newname] = { 
     get: function(elem) { 
      if (elem.currentStyle) 
       var bg = elem.currentStyle[styleattr]; 
      else if (window.getComputedStyle) 
       var bg = document.defaultView.getComputedStyle(elem, 
        null).getPropertyValue(styleattr); 
      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]); 
      } 
     } 
    } 
} 
_register_jquery_get_hex_color("backgroundColor","background-color"); 
_register_jquery_get_hex_color("borderColor","border-color"); 
_register_jquery_get_hex_color("color","color");