jquery 가져온 색상 값을 16진법으로 변환하는 방법
구글, 화호, IE8 이상의 브라우저에서 얻은 색상 값은 RGB 형식, 예를 들어 rgb(255255,0)로 매우 부적합하거나 실제 인코딩에서 사용하기 불편하다는 것을 알아차렸을 것입니다. 이때 변환이 필요합니다. 다음은 관련 변환 코드를 제공합니다.
구체적인 코드는 다음과 같습니다.
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title> - </title>
<style type="text/css">
#thediv
{
width:200px;
height:100px;
background-color:#CCC;
line-height:100px;
text-align:center;
color:#60F;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$.fn.getHexBackgroundColor=function(id,property)
{
var rgb=$(id).css(property);
if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit)
{
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;
}
$(document).ready(function(){
$("#bt").click(function(){
$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color"))
})
})
</script>
</head>
<body>
<div id="thediv"> </div>
<input type="button" value=" " id="bt" />
</body>
</html>위의 코드는 RGB 형식의 색상 값을 16진수로 변환하는 우리의 요구를 실현했습니다. 다음은 구현 과정을 간단하게 소개합니다.
하나.실현 원리:
단추를 누르면 클릭 이벤트를 터치하고 클릭 이벤트 처리 함수를 실행합니다. 이 처리 함수는 변환된 색 값을 div에 기록할 수 있습니다. 그 중의 핵심 함수는 getHexBackgroundColor()입니다. 이 함수는 먼저 브라우저가 IE9 아래인지 판단하고 만약에 색 값을 직접 되돌려 주고 변환하지 않습니다. IE9 아래 브라우저에서 가져온 색 값이 16진수입니다.IE8 이상 브라우저나 구글 불여우라면 변환이 필요합니다. 변환에 대한 자세한 내용은 여기 소개되지 않으니 코드 설명을 참고하세요.
2.코드 메모:
1.$.fn.getHexBackgroundColor=function (id,property) {}, 하나의 함수를 설명합니다. 이 함수는 색 값 변환을 할 수 있습니다. 이 함수는 두 개의 매개 변수를 가지고 있습니다. 첫 번째 매개 변수는 요소의 id 속성 값이고 두 번째는 속성입니다.
2.var rgb=$(id).css(property), 색상 값을 가져옵니다. 이때 rgb는 16진수일 수도 있고 RGB 형식일 수도 있습니다.
3.if($.browser.msie & $.browser.version>8 | $.browser.mozilla | $.browser.webkit) 브라우저가 IE8 이상이거나 화호나 구글 브라우저인지 판단합니다.
4.rgb=rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/), 이것은 정규 표현식에 대해 알아야 합니다. match() 함수를 통해 색치 문자열을 하나의 그룹으로 만들 수 있습니다. 이 그룹에는 4개의 요소가 있습니다. rgb(102, 0, 255)를 예로 들면 첫 번째 요소는 전체 색치 문자열 rgb(102, 0, 255), 두 번째 그룹 요소는 102, 세 번째는 0, 네 번째는 255입니다.
5.functionhex(x) {}, 함수를 설명합니다. 이 함수는 색채 값 변환을 할 수 있습니다. 매개 변수를 가지고 rgb 그룹의 어떤 것을 전달합니다.
6.return ("0"+parseInt(x).toString(16)).slice(-2), 전송 수치를 16진수로 변환할 수 있습니다. 앞에 0이 추가되었음을 주의하십시오. slice 함수를 사용하여 마지막 두 문자를 캡처하고 캡처한 두 문자를 되돌려주는 것이 좋습니다.
7.rgb='#'+hex(rgb[1])+hex(rgb[2])+hex(rgb[3]), 값을 조합합니다.
8.return rgb, rgb 값을 되돌려줍니다.
9.$(document).ready (function () {}), 문서 구조가 완전히 불러오면 함수의 코드를 실행합니다.
10.$("#bt").클릭 (function () {}), 단추에 클릭 이벤트 처리 유칼립투스 트리를 등록합니다.
11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv", "color"), 변환된 색상 값을 div에 기록합니다.
셋.관련 읽기:
1. 브라우저 버전 판단은 을 참조하십시오.
2. parseInt() 함수는 를 참조할 수 있습니다.
3.toString() 함수는 를 참조할 수 있습니다.
4.slice() 함수는 를 참조하십시오.
5.click 이벤트는 를 참조하십시오.
6.text() 함수는 를 참조할 수 있습니다.
본 논문이 여러분의 jQuery 프로그램 설계에 도움이 되기를 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
