CSS 스타일로 색상 값을 얻는 jQuery의 문제, 다양한 브라우저 형식에 대한 다양한 솔루션_jquery

스타일에서 background-color 값을 얻기 위해 jQuery를 사용했을 때, IE10 이하 버전에서는 획득된 색상 값이 HEX 형식[#ffff00]으로 표시되는 반면, IE10, Chrome, Firefox에서는 GRB 형식 표시 [rgb(255,0,0)] 색상 값을 판단하고 처리해야 하므로 처리를 용이하게 하려면 HEX 형식이 바람직합니다. 검색해보니 해외사이트에서 코드 한조각을 받았습니다.

코드를 복사하세요 코드는 다음과 같습니다.

$.fn.getHexBackgroundColor = function() {
var rgb = $(this).css('Background-color');
rgb = rgb.match(/^rgb(( d ),s *(d ),s*(d ))$/);
function hex(x) {return ("0"parseInt(x).toString(16)).slice(-2); }
return rgb= "#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]);
}

위 정의는 jQuery 함수를 사용하면 $("#bg").getHexBackgroundColor();를 통해 id="bg" 태그를 사용하여 배경색의 RGB 값을 얻을 수 있습니다.

작은 수정, 즉 판단을 추가해 보겠습니다. HEX 값이 표시되면(IE10 미만), IE가 아닌 브라우저인 경우 값을 RGB 형식으로 변환합니다. 🎜>

코드 복사 코드는 다음과 같습니다.

$.fn.getBackgroundColor = function() {
var rgb = $(this ).css('Background-color');
if(rgb >= 0) return rgb;//16진수 값이면 직접 반환
else{
rgb = rgb.match(/ ^rgb((d ),s*(d ),s*(d ))$/);
function hex(x) {return ("0" parseInt(x) ).toString(16)).slice( -2);}
rgb= "#" hex(rgb[1]) hex(rgb[2]) hex(rgb[3]);
}
rgb 반환;
}