>웹 프론트엔드 >JS 튜토리얼 >style_jquery에서 색상 값을 가져오는 jQuery 메서드

style_jquery에서 색상 값을 가져오는 jQuery 메서드

WBOY
WBOY원래의
2016-05-16 16:17:151034검색

이 기사의 예에서는 jQuery가 스타일에서 색상 값을 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

오늘 스타일에서 background-color 값을 얻기 위해 jQuery를 사용했을 때 IE에서 얻은 색상 값이 Chrome 및 Firefox에서 표시되는 것과 다른 형식으로 표시되는 것을 발견했습니다. 형식 [#ffff00], Chrome에서는 Firefox가 [rgb(255,0,0)]을 GRB 형식으로 표시합니다. 색상 값을 데이터베이스에 저장해야 하므로 색상 값 형식을 통일하려고 합니다. ​​(실제로 통일하지 않으면 보관이 가능합니다.) 검색한 결과 외국 웹사이트에서 코드 조각을 받았습니다:

$.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]);
}

위 정의는 $("#bg").getHexBackgroundColor();를 통해 id="bg" 태그의 배경색에 대한 RGB 값을 얻을 수 있는 jQuery 함수입니다.

작은 수정, 즉 판단을 추가해 보겠습니다. IE 브라우저인 경우 값을 직접 가져옵니다. IE가 아닌 브라우저인 경우 값을 RGB 형식으로 변환합니다.

$.fn.getHexBackgroundColor = function() {
 var rgb = $(this).css('background-color');
 if(!$.browser.msie){
  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]);
 }
 return rgb;
}

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.