2007/04/18 18:31
[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기. 작은 팁2007/04/18 18:31
Js로 Style 을 Control 하는 경우가 많이 있습니다.
자연스럽게 색깔 설정에도 손의 많이 가고, 그러다 보면 컬러코드를 가지고 작업을 해야 할 때가 있습니다.
이 팁은 이런 상황에서 유용하게 사용 됩니다.
IE6, IE7, Opera 같은경우 컬러코드 그대로 반환을 해 줍니다.
예를들어,
하지만 FireFox, Safari 는
rgb(255, 255, 0) 을 반환합니다.
이렇게 되면 브라우져 별로 색상정의가 틀려져서, 여기서는 되고 저기서는 에러나고 하는 상황이 연출이 됩니다.
이럴경우 rgb코드를 16진수 컬러코드로 바꿔주는 함수입니다.
Converter 하는 부분은 http://www.csgnetwork.com/csgcolorsel6.html를 참고했습니다.
사용법은
자연스럽게 색깔 설정에도 손의 많이 가고, 그러다 보면 컬러코드를 가지고 작업을 해야 할 때가 있습니다.
이 팁은 이런 상황에서 유용하게 사용 됩니다.
IE6, IE7, Opera 같은경우 컬러코드 그대로 반환을 해 줍니다.
예를들어,
<div id="Some" style="background-color:#ffff00">someElement</div>
<script type="text/javascript">
alert(document.getElementById("Some").style.backgroundColor);
</script>
일 경우 #ffff00을 반환합니다.<script type="text/javascript">
alert(document.getElementById("Some").style.backgroundColor);
</script>
하지만 FireFox, Safari 는
rgb(255, 255, 0) 을 반환합니다.
이렇게 되면 브라우져 별로 색상정의가 틀려져서, 여기서는 되고 저기서는 에러나고 하는 상황이 연출이 됩니다.
이럴경우 rgb코드를 16진수 컬러코드로 바꿔주는 함수입니다.
var getRgbToHex = function(rgb_code){
if(Reg.test(rgb_code)){
tempColor = rgb_code.replace(Reg, "");
tempLength = tempColor.length - 1;
tempColor = tempColor.substr(0, tempLength);
tempColor = tempColor.split(",");
red = tempColor[0];
green = tempColor[1];
blue = tempColor[2];
colorCode = "#" + rgb_hex(red) + rgb_hex(green) + rgb_hex(blue);
return colorCode;
}
return rgb_code;
}
var rgb_hex = function(color)
{
if(color==0){
var color="00";
return color;
}
else{
var y=color/16;
var y=y+"a";
if (y.indexOf(".")==-1){
var hex2="0";
var u=y.indexOf("a");
var q=y.substring(0,u);
var hex1=hex_array[q];
}
else{
var l=y.split(".");
var q=l[0];
var z=q*16;
var xyz=color-z;
var hex1=hex_array[q];
var hex2=hex_array[xyz];
}
var color=hex1+hex2;
return color;
}
}
if(Reg.test(rgb_code)){
tempColor = rgb_code.replace(Reg, "");
tempLength = tempColor.length - 1;
tempColor = tempColor.substr(0, tempLength);
tempColor = tempColor.split(",");
red = tempColor[0];
green = tempColor[1];
blue = tempColor[2];
colorCode = "#" + rgb_hex(red) + rgb_hex(green) + rgb_hex(blue);
return colorCode;
}
return rgb_code;
}
var rgb_hex = function(color)
{
if(color==0){
var color="00";
return color;
}
else{
var y=color/16;
var y=y+"a";
if (y.indexOf(".")==-1){
var hex2="0";
var u=y.indexOf("a");
var q=y.substring(0,u);
var hex1=hex_array[q];
}
else{
var l=y.split(".");
var q=l[0];
var z=q*16;
var xyz=color-z;
var hex1=hex_array[q];
var hex2=hex_array[xyz];
}
var color=hex1+hex2;
return color;
}
}
Converter 하는 부분은 http://www.csgnetwork.com/csgcolorsel6.html를 참고했습니다.
사용법은
<script type="text/javascript">
var getColorCode = function(ele){
nowColor = document.getElementById(ele).style.color;
colorCode = getRgbToHex(nowColor);
alert(colorCode);
</script>
<div id="some" style="color:#FF0000">Element</div>
<input type="button" value="getElementColorCode" onclick="getColorCode('some')">
var getColorCode = function(ele){
nowColor = document.getElementById(ele).style.color;
colorCode = getRgbToHex(nowColor);
alert(colorCode);
</script>
<div id="some" style="color:#FF0000">Element</div>
<input type="button" value="getElementColorCode" onclick="getColorCode('some')">
'작은 팁' 카테고리의 다른 글
| [JS] HTML Attribute Parser (0) | 2007/07/13 |
|---|---|
| [JS] OS 알아내기 (with js & jQuery) (0) | 2007/07/10 |
| [js] FireFox, Safari 에서도 16진수 컬러코드 사용하기. (1) | 2007/04/18 |
| [jQuery] interface > sortable 스크롤이 바닥일경우 drag시 스크롤 움직이는 버그 (0) | 2007/04/17 |
| [jQuery] interface > sortable > onChange > SortSerialize Bug (0) | 2007/04/17 |
| [js]현재 스크롤 위치 알아내기 (4) | 2007/04/13 |
