[JQUERY] 어떻게 16 진수 색상 값이 아닌 RGB 값을 얻을 수 있습니까?
JQUERY어떻게 16 진수 색상 값이 아닌 RGB 값을 얻을 수 있습니까?
해결법
-
1.
var hexDigits = new Array ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); //Function to convert rgb color to hex format function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } function hex(x) { return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]; }
(출처)
-
2.여기에 내가 @ 매트의 제안에 따라 쓴 청소기 솔루션입니다 :
여기에 내가 @ 매트의 제안에 따라 쓴 청소기 솔루션입니다 :
function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); }
일부 브라우저는 이미 (아래 인터넷 익스플로러 8 기준) 진수로 색상을 반환합니다. 당신이 그 사건을 처리해야하는 경우 @gfrobenius 제안처럼, 단지 함수 내부 조건을 추가 :
function rgb2hex(rgb) { if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb; rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); }
수 있습니까 힘 jQuery.css ( "backgroundColor로") 16 진수 형식의 반환 : 당신이 더 완전한 접근을 jQuery를 사용하고 싶은 경우이 질문에 대답 할 때, 당신은 내가 가리 켰을 때, jQuery를 1.4.3 이후 CSS 후크를 사용할 사용할 수 있습니까?
-
3.대부분의 브라우저는 사용할 때 RGB 값을 반환하는 것 :
대부분의 브라우저는 사용할 때 RGB 값을 반환하는 것 :
$('#selector').css('backgroundColor');
만 즉 (만 6 지금까지 테스트) 16 진수 값을 반환합니다.
즉에서 오류 메시지를 피하기 위해, 당신은 if 문 기능을 래핑 수 :
function rgb2hex(rgb) { if ( rgb.search("rgb") == -1 ) { return rgb; } else { rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } }
-
4.RGBA 호환성 업데이트 @ErickPetru :
RGBA 호환성 업데이트 @ErickPetru :
function rgb2hex(rgb) { rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); }
나는 정의 된 경우 알파 값과 일치하지만, 그것을 사용하지 않도록 정규식을 업데이트했습니다.
-
5.여기에 jQuery를 사용하지 않는 ES6 하나의 라이너입니다 :
여기에 jQuery를 사용하지 않는 ES6 하나의 라이너입니다 :
var rgb = document.querySelector('#selector').style['background-color']; return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('');
-
6.여기 내 객체가 진수 색상의 투명 버전은 실제로 단어 "투명"입니다 스타일 속성에 결과를 삽입 할 때부터 투명에도 검사, 나는이 필요한 버전입니다 ..
여기 내 객체가 진수 색상의 투명 버전은 실제로 단어 "투명"입니다 스타일 속성에 결과를 삽입 할 때부터 투명에도 검사, 나는이 필요한 버전입니다 ..
function rgb2hex(rgb) { if ( rgb.search("rgb") == -1 ) { return rgb; } else if ( rgb == 'rgba(0, 0, 0, 0)' ) { return 'transparent'; } else { rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } }
-
7.기능 진수의 요소의 반환 배경색이.
기능 진수의 요소의 반환 배경색이.
function getBgColorHex(elem){ var color = elem.css('background-color') var hex; if(color.indexOf('#')>-1){ //for IE hex = color; } else { var rgb = color.match(/\d+/g); hex = '#'+ ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2); } return hex; }
사용 예 :
$('#div1').click(function(){ alert(getBgColorHex($(this)); }
jsfiddle
-
8.@Jim F 대답하지만 ES6 구문, 그래서 덜 지침처럼 같은 대답 :
@Jim F 대답하지만 ES6 구문, 그래서 덜 지침처럼 같은 대답 :
const rgb2hex = (rgb) => { if (rgb.search("rgb") === -1) return rgb; rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/); const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2); return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); };
-
9.색상 클래스는 부트 스트랩 색상 선택기에서 촬영
색상 클래스는 부트 스트랩 색상 선택기에서 촬영
// Color object var Color = function(val) { this.value = { h: 1, s: 1, b: 1, a: 1 }; this.setColor(val); }; Color.prototype = { constructor: Color, //parse a string to HSB setColor: function(val){ val = val.toLowerCase(); var that = this; $.each( CPGlobal.stringParsers, function( i, parser ) { var match = parser.re.exec( val ), values = match && parser.parse( match ), space = parser.space||'rgba'; if ( values ) { if (space === 'hsla') { that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values)); } else { that.value = CPGlobal.RGBtoHSB.apply(null, values); } return false; } }); }, setHue: function(h) { this.value.h = 1- h; }, setSaturation: function(s) { this.value.s = s; }, setLightness: function(b) { this.value.b = 1- b; }, setAlpha: function(a) { this.value.a = parseInt((1 - a)*100, 10)/100; }, // HSBtoRGB from RaphaelJS // https://github.com/DmitryBaranovskiy/raphael/ toRGB: function(h, s, b, a) { if (!h) { h = this.value.h; s = this.value.s; b = this.value.b; } h *= 360; var R, G, B, X, C; h = (h % 360) / 60; C = b * s; X = C * (1 - Math.abs(h % 2 - 1)); R = G = B = b - C; h = ~~h; R += [C, X, 0, 0, X, C][h]; G += [X, C, C, X, 0, 0][h]; B += [0, 0, X, C, C, X][h]; return { r: Math.round(R*255), g: Math.round(G*255), b: Math.round(B*255), a: a||this.value.a }; }, toHex: function(h, s, b, a){ var rgb = this.toRGB(h, s, b, a); return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1); }, toHSL: function(h, s, b, a){ if (!h) { h = this.value.h; s = this.value.s; b = this.value.b; } var H = h, L = (2 - s) * b, S = s * b; if (L > 0 && L <= 1) { S /= L; } else { S /= 2 - L; } L /= 2; if (S > 1) { S = 1; } return { h: H, s: S, l: L, a: a||this.value.a }; } };
사용하는 방법
var color = new Color("RGB(0,5,5)"); color.toHex()
-
10.내가 사용하는 기본 기능과 등록 번호-EXPS을 읽을 수있는 기능을 만들었습니다. 이 기능은 진수, RGB 또는 RGBA의 CSS 형식으로 반환 진수 표현 색상을 받아들입니다. 편집 : 고정, RGBA () 형식을 구문 분석 버그가 있었다 ...
내가 사용하는 기본 기능과 등록 번호-EXPS을 읽을 수있는 기능을 만들었습니다. 이 기능은 진수, RGB 또는 RGBA의 CSS 형식으로 반환 진수 표현 색상을 받아들입니다. 편집 : 고정, RGBA () 형식을 구문 분석 버그가 있었다 ...
function getHexColor( color ){ //if color is already in hex, just return it... if( color.indexOf('#') != -1 ) return color; //leave only "R,G,B" : color = color .replace("rgba", "") //must go BEFORE rgb replace .replace("rgb", "") .replace("(", "") .replace(")", ""); color = color.split(","); // get Array["R","G","B"] // 0) add leading # // 1) add leading zero, so we get 0XY or 0X // 2) append leading zero with parsed out int value of R/G/B // converted to HEX string representation // 3) slice out 2 last chars (get last 2 chars) => // => we get XY from 0XY and 0X stays the same return "#" + ( '0' + parseInt(color[0], 10).toString(16) ).slice(-2) + ( '0' + parseInt(color[1], 10).toString(16) ).slice(-2) + ( '0' + parseInt(color[2], 10).toString(16) ).slice(-2); }
-
11.시험
시험
// c - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b" let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
// RGB - 컬러 STR 예컨대 "RGB (12,233,43)"결과 색상 헥스 예컨대 "# 0ce92b" rgb2hex = C => '#'+ c.match하자 (/ \ D + / g) .MAP (X => (+ X)로 .toString (16) .padStart (2,0)). join`` CONSOLE.LOG (rgb2hex ( "RGB (12,233,43"));
-
12.이 사람은 조금 더 멋진 보이는 :
이 사람은 조금 더 멋진 보이는 :
var rgb = $('#selector').css('backgroundColor').match(/\d+/g); var r = parseInt(rgb[0], 10); var g = parseInt(rgb[1], 10); var b = parseInt(rgb[2], 10); var hex = '#'+ r.toString(16) + g.toString(16) + b.toString(16);
더 간결한 한 줄 :
var rgb = $('#selector').css('backgroundColor').match(/\d+/g); var hex = '#'+ Number(rgb[0]).toString(16) + Number(rgb[1]).toString(16) + Number(rgb[2]).toString(16);
항상 반환 진수에 jQuery를 강제 :
$.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(/\d+/g); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return "#" + hex(bg[0]) + hex(bg[1]) + hex(bg[2]); } } }
-
13.그냥 위의 저스틴의 대답 @에 추가 할 ..
그냥 위의 저스틴의 대답 @에 추가 할 ..
그것은해야한다
var rgb = document.querySelector('#selector').style['background-color']; return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => String("0" + parseInt(color).toString(16)).slice(-2)).join('');
이 # d8a00a되어야 동안 파싱 INT 함수 자릅니다 선도 상기 제로 같이, 이렇게 될 수 5 개 또는 4 문자 잘못된 컬러 코드를 생성 ... 즉 RGB 신호 (216, 160, 10)는 # d8a0a를 생성한다.
감사
-
14.여기가 IE에서 스크립트 오류가 발생하지 않습니다 발견 솔루션이다 : http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
여기가 IE에서 스크립트 오류가 발생하지 않습니다 발견 솔루션이다 : http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
-
15.예를 들어, # FF0000의가 # FF00된다 스티븐 Pribilinskiy의 대답은, 선행 0 삭제합니다.
예를 들어, # FF0000의가 # FF00된다 스티븐 Pribilinskiy의 대답은, 선행 0 삭제합니다.
해결책은 0을 선도 오프 하위 문자열의 마지막 2 자리를 추가하는 것입니다.
var rgb = $('#selector').css('backgroundColor').match(/\d+/g); var hex = '#'+ String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);
-
16.문제는 jQuery를 사용하여 이후 다니엘 엘리엇의 코드를 기반으로 플러그인, 여기 JQuery와있다 :
문제는 jQuery를 사용하여 이후 다니엘 엘리엇의 코드를 기반으로 플러그인, 여기 JQuery와있다 :
$.fn.cssAsHex = function(colorProp) { var hexDigits = '0123456789abcdef'; function hex(x) { return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]; }; // Convert RGB color to Hex format function rgb2hex(rgb) { var rgbRegex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return '#' + hex(rgbRegex[1]) + hex(rgbRegex[2]) + hex(rgbRegex[3]); }; return rgb2hex(this.css(colorProp)); };
를 같이 사용합니다 :
var hexBackgroundColor = $('#myElement').cssAsHex('background-color');
-
17.또한 여기서 제공된 문자열 다른 가능한 화이트 스페이스 대문자의 인수 및 검사를 이용하여 내를 toUpperCase 않는 용액이다.
또한 여기서 제공된 문자열 다른 가능한 화이트 스페이스 대문자의 인수 및 검사를 이용하여 내를 toUpperCase 않는 용액이다.
var a = "rgb(10, 128, 255)"; var b = "rgb( 10, 128, 255)"; var c = "rgb(10, 128, 255 )"; var d = "rgb ( 10, 128, 255 )"; var e = "RGB ( 10, 128, 255 )"; var f = "rgb(10,128,255)"; var g = "rgb(10, 128,)"; var rgbToHex = (function () { var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i; function pad(num) { if (num.length === 1) { num = "0" + num; } return num; } return function (rgb, uppercase) { var rxArray = rgb.match(rx), hex; if (rxArray !== null) { hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16)); if (uppercase === true) { hex = hex.toUpperCase(); } return hex; } return; }; }()); console.log(rgbToHex(a)); console.log(rgbToHex(b, true)); console.log(rgbToHex(c)); console.log(rgbToHex(d)); console.log(rgbToHex(e)); console.log(rgbToHex(f)); console.log(rgbToHex(g));
jsfiddle에
jsperf에 속도 비교
또 개선)합니다 (RGB 문자열을 트리밍 할 수
var rxArray = rgb.trim().match(rx),
-
18.내 아름다운 비 표준 용액
내 아름다운 비 표준 용액
HTML
<div id="selector" style="background-color:#f5b405"></div>
jQuery를
$("#selector").attr("style").replace("background-color:", "");
결과
#f5b405
-
19.진수를 RGB로 변환
진수를 RGB로 변환
나는 재스민 각도기를 사용하고 난 같은 오류를 얻고 있었다 - '#fff'를 포함하는 [ 'RGBA (255, 255, 255, 1)'] 예상. 다음 기능은 나를 위해 벌금을했다.
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;
}
describe('Check CSS', function() { it('should check css of login page', 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); })
from https://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 체크 박스가 jQuery를 함께 선택되어 있는지 확인 (0) | 2020.09.24 |
---|---|
[JQUERY] 어떻게 데이터 id 속성을 얻으려면? (0) | 2020.09.24 |
[JQUERY] jQuery를 게시 JSON (0) | 2020.09.24 |
[JQUERY] 어떻게 jQuery를에 로딩 스피너를 보여? (0) | 2020.09.24 |
[JQUERY] (CORS) 게시 요청 가공 크로스 원산지 자원 공유를 얻는 방법 (0) | 2020.09.24 |